.gallery-thumbnail
{
    max-width: 100%;
    height: auto;
}

.grid-sizer,
.grid-item
{
    width: 20%;
}

.grid-item figure,
.grid-item > div
{
    margin: 0;
    margin: .4rem;
}

/*  masonry grid media queries */
@media screen and (max-width: 2200px)
{
    .grid-sizer,
    .grid-item
    {
        width: 20%;
    }
}

@media screen and (max-width: 1800px)
{
    .grid-sizer,
    .grid-item
    {
        width: 30%;
    }
}

@media screen and (max-width: 1600px)
{
    .grid-sizer,
    .grid-item
    {
        width: 33.33%;
    }
}

@media screen and (max-width: 1224px)
{
    .grid-sizer,
    .grid-item
    {
        width: 33.33%;
    }
}

@media screen and (max-width: 980px)
{
    .grid-sizer,
    .grid-item
    {
        width: 50%;
    }
}

@media screen and (max-width: 720px)
{
    .grid-sizer,
    .grid-item
    {
        width: 50%;
    }
}

@media screen and (max-width: 480px)
{
    .grid-sizer,
    .grid-item
    {
        width: 100%;
    }
}

/* Gallery hover effects */
.grid-hover
{
    position: relative;

    margin: 0 auto;
    padding: 1em 0 4em;

    list-style: none;
}
.grid-hover figure
{
    position: relative;

    overflow: hidden;

    min-width: 320px;
    max-width: 480px;
    max-height: 360px;
    margin: 10px 1%;

    cursor: pointer; 
    text-align: center;

    background: #3085a3;
}
.grid-hover figure img
{
    position: relative;

    display: block;

    max-width: 100%;
    min-height: 100%;

    opacity: .8;
}
.grid-hover figure figcaption
{
    font-size: 1.25em;

    position: absolute;
    top: 0;
    right: 0;

    width: 100%;
    height: 100%; 
    padding: 2em;

    color: #fff;

    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
}
.grid-hover figure figcaption::before
{
    pointer-events: none;
}
.grid-hover figure figcaption::after
{
    pointer-events: none;
}
.grid-hover figure figcaption > a
{
    font-size: 0;

    position: absolute;
    z-index: 1000;
    top: 0;
    right: 0;

    width: 100%;
    height: 100%;

    white-space: nowrap;
    text-indent: 200%;

    opacity: 0;
}
.grid-hover figure h2
{
    font-weight: 300;

    margin: 0;

    word-spacing: -.15em;

    color: white;
}
.grid-hover figure h2 span
{
    font-weight: 800;
}
.grid-hover figure p
{
    font-size: 68.5%; 

    margin: 0;

    letter-spacing: 1px;
}

/*---------------*/
/***** Lily *****/
/*---------------*/
figure.effect-lily img
{
    width: -webkit-calc(100% + 50px);
    width:    -moz-calc(100% + 50px);
    width:         calc(100% + 50px);
    max-width: none;

    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(40px, 0, 0);
       -moz-transform: translate3d(40px, 0, 0);
            transform: translate3d(40px, 0, 0); 

    opacity: .7;
}

figure.effect-lily figcaption
{
    text-align: right;
}
figure.effect-lily figcaption > div
{
    position: absolute;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 50%; 
    padding: 2em;
}

figure.effect-lily h2
{
    -webkit-transition: -webkit-transform .35s;
       -moz-transition:         transform .35s, -moz-transform .35s;
         -o-transition:      -o-transform .35s;
            transition: -webkit-transform .35s;
            transition:         transform .35s;
            transition:         transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s; 
    -webkit-transform: translate3d(0, 40px, 0);
       -moz-transform: translate3d(0, 40px, 0);
            transform: translate3d(0, 40px, 0);
}

figure.effect-lily p
{
    -webkit-transition: opacity .2s, -webkit-transform .35s;
       -moz-transition: opacity .2s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .2s, -o-transform .35s;
            transition: opacity .2s, -webkit-transform .35s;
            transition: opacity .2s, transform .35s;
            transition: opacity .2s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s; 
    -webkit-transform: translate3d(0, 40px, 0);
       -moz-transform: translate3d(0, 40px, 0);
            transform: translate3d(0, 40px, 0);

    opacity: 0;
    color: rgba(255, 255, 255, .8);
}

figure.effect-lily:hover img
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

    opacity: 1;
}

figure.effect-lily:hover p
{
    -webkit-transition-delay: .05s;
       -moz-transition-delay: .05s;
         -o-transition-delay: .05s;
            transition-delay: .05s;
    -webkit-transition-duration: .35s;
       -moz-transition-duration: .35s;
         -o-transition-duration: .35s;
            transition-duration: .35s; 
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);

    opacity: 1;
}

figure.effect-lily:hover h2
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

/*---------------*/
/***** Sadie *****/
/*---------------*/
figure.effect-sadie figcaption::before
{
    position: absolute;
    top: 0;
    right: 0;

    width: 100%;
    height: 100%;

    content: '';
    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s; 
    -webkit-transform: translate3d(0, 50%, 0);
       -moz-transform: translate3d(0, 50%, 0);
            transform: translate3d(0, 50%, 0);

    opacity: 0;
    background: -webkit-linear-gradient(top, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, .8) 75%);
    background: -webkit-gradient(linear, right top, right bottom, from(rgba(72, 76, 97, 0)), color-stop(75%, rgba(72, 76, 97, .8)));
    background:    -moz-linear-gradient(top, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, .8) 75%);
    background:      -o-linear-gradient(top, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, .8) 75%);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(72, 76, 97, 0)), color-stop(75%, rgba(72, 76, 97, .8)));
    background:         linear-gradient(to bottom, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, .8) 75%);
}

figure.effect-sadie h2
{
    position: absolute;
    top: 50%;
    right: 0;

    width: 100%;

    -webkit-transition: color .35s, -webkit-transform .35s;
       -moz-transition: transform .35s, color .35s, -moz-transform .35s;
         -o-transition: color .35s, -o-transform .35s;
            transition: color .35s, -webkit-transform .35s;
            transition: transform .35s, color .35s;
            transition: transform .35s, color .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, -50%, 0);
       -moz-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0); 

    color: #484c61;
}

figure.effect-sadie p
{
    position: absolute;
    right: 0;
    bottom: 0;

    width: 100%;
    padding: 2em;

    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, 10px, 0);
       -moz-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0); 

    opacity: 0;
}

figure.effect-sadie:hover h2
{
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
       -moz-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
            transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0); 

    color: #fff;
}

figure.effect-sadie:hover figcaption::before
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

    opacity: 1;
}

figure.effect-sadie:hover p
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

    opacity: 1;
}

/*---------------*/
/***** Roxy *****/
/*---------------*/
figure.effect-roxy
{
    background: -webkit-linear-gradient(-45deg, #ff89e9 0%, #05abe0 100%);
    background:    -moz-linear-gradient(-45deg, #ff89e9 0%, #05abe0 100%);
    background:      -o-linear-gradient(-45deg, #ff89e9 0%, #05abe0 100%);
    background: -webkit-linear-gradient(135deg, #ff89e9 0%, #05abe0 100%);
    background:    -moz-linear-gradient(135deg, #ff89e9 0%, #05abe0 100%);
    background:      -o-linear-gradient(135deg, #ff89e9 0%, #05abe0 100%);
    background:         linear-gradient(-45deg, #ff89e9 0%, #05abe0 100%);
}
figure.effect-roxy img
{
    width: -webkit-calc(100% + 60px);
    width:    -moz-calc(100% + 60px);
    width:         calc(100% + 60px);
    max-width: none;

    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(50px, 0, 0);
       -moz-transform: translate3d(50px, 0, 0);
            transform: translate3d(50px, 0, 0);
}
figure.effect-roxy figcaption
{
    padding: 3em;

    text-align: right;
}
figure.effect-roxy figcaption::before
{
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;

    content: '';
    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(20px, 0, 0);
       -moz-transform: translate3d(20px, 0, 0);
            transform: translate3d(20px, 0, 0); 

    opacity: 0;
    border: 1px solid #fff;
}
figure.effect-roxy h2
{
    padding: 30% 0 10px 0;
}
figure.effect-roxy p
{
    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(10px, 0, 0);
       -moz-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0); 

    opacity: 0;
}
figure.effect-roxy:hover img
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

    opacity: .7;
}
figure.effect-roxy:hover figcaption::before
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

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

    opacity: 1;
}

/*---------------*/
/***** Bubba *****/
/*---------------*/
figure.effect-bubba
{
    background: #9e5406;
}
figure.effect-bubba img
{
    -webkit-transition: opacity .35s;
       -moz-transition: opacity .35s;
         -o-transition: opacity .35s;
            transition: opacity .35s; 

    opacity: .7;
}
figure.effect-bubba:hover img
{
    opacity: .4;
}
figure.effect-bubba:hover figcaption::before
{
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1); 

    opacity: 1;
}
figure.effect-bubba:hover figcaption::after
{
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1); 

    opacity: 1;
}
figure.effect-bubba:hover h2
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

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

    opacity: 1;
}
figure.effect-bubba figcaption::before
{
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;

    content: '';
    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: scale(0, 1);
       -moz-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
         -o-transform: scale(0, 1);
            transform: scale(0, 1); 

    opacity: 0;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
figure.effect-bubba figcaption::after
{
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;

    content: '';
    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: scale(1, 0);
       -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
         -o-transform: scale(1, 0);
            transform: scale(1, 0); 

    opacity: 0;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}
figure.effect-bubba h2
{
    padding-top: 30%;

    -webkit-transition: -webkit-transform .35s;
       -moz-transition:         transform .35s, -moz-transform .35s;
         -o-transition:      -o-transform .35s;
            transition: -webkit-transform .35s;
            transition:         transform .35s;
            transition:         transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, -20px, 0);
       -moz-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
}
figure.effect-bubba p
{
    padding: 20px 2.5em;

    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, 20px, 0);
       -moz-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0); 

    opacity: 0;
}

/*---------------*/
/***** Romeo *****/
/*---------------*/
figure.effect-romeo
{
    -webkit-perspective: 1000px;
       -moz-perspective: 1000px;
            perspective: 1000px;
}
figure.effect-romeo img
{
    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, 0, 300px);
       -moz-transform: translate3d(0, 0, 300px);
            transform: translate3d(0, 0, 300px);
}
figure.effect-romeo:hover img
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

    opacity: .6;
}
figure.effect-romeo:hover figcaption::before
{
    -webkit-transform: translate3d(50%, -50%, 0) rotate(-45deg);
       -moz-transform: translate3d(50%, -50%, 0) rotate(-45deg);
            transform: translate3d(50%, -50%, 0) rotate(-45deg); 

    opacity: .5;
}
figure.effect-romeo:hover figcaption::after
{
    -webkit-transform: translate3d(50%, -50%, 0) rotate(45deg);
       -moz-transform: translate3d(50%, -50%, 0) rotate(45deg);
            transform: translate3d(50%, -50%, 0) rotate(45deg); 

    opacity: .5;
}
figure.effect-romeo:hover h2
{
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0);
       -moz-transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0);
            transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0);
}
figure.effect-romeo:hover p
{
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0);
       -moz-transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0);
            transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0);
}
figure.effect-romeo figcaption::before
{
    position: absolute;
    top: 50%;
    right: 50%;

    width: 80%;
    height: 1px;

    content: '';
    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(50%, -50%, 0);
       -moz-transform: translate3d(50%, -50%, 0);
            transform: translate3d(50%, -50%, 0); 

    background: #fff;
}
figure.effect-romeo figcaption::after
{
    position: absolute;
    top: 50%;
    right: 50%;

    width: 80%;
    height: 1px;

    content: '';
    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(50%, -50%, 0);
       -moz-transform: translate3d(50%, -50%, 0);
            transform: translate3d(50%, -50%, 0); 

    background: #fff;
}
figure.effect-romeo h2
{
    position: absolute;
    top: 50%;
    right: 0;

    width: 100%;

    -webkit-transition: -webkit-transform .35s;
       -moz-transition:         transform .35s, -moz-transform .35s;
         -o-transition:      -o-transform .35s;
            transition: -webkit-transform .35s;
            transition:         transform .35s;
            transition:         transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0);
       -moz-transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0);
            transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0);
}
figure.effect-romeo p
{
    position: absolute;
    top: 50%;
    right: 0;

    width: 100%;
    padding: .25em 2em;

    -webkit-transition: -webkit-transform .35s;
       -moz-transition:         transform .35s, -moz-transform .35s;
         -o-transition:      -o-transform .35s;
            transition: -webkit-transform .35s;
            transition:         transform .35s;
            transition:         transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0);
       -moz-transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0);
            transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0);
}

/*---------------*/
/***** Layla *****/
/*---------------*/
figure.effect-layla
{
    background: #18a367;
}
figure.effect-layla img
{
    height: 390px;

    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s; 
    -webkit-transform: translate3d(0, -30px, 0);
       -moz-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
}
figure.effect-layla figcaption
{
    padding: 3em;
}
figure.effect-layla figcaption::before
{
    position: absolute;
    top: 50px;
    right: 30px;
    bottom: 50px;
    left: 30px;

    content: '';
    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s; 
    -webkit-transform: scale(0, 1);
       -moz-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
         -o-transform: scale(0, 1);
            transform: scale(0, 1);
    -webkit-transform-origin: 100% 0;
       -moz-transform-origin: 100% 0;
        -ms-transform-origin: 100% 0;
         -o-transform-origin: 100% 0;
            transform-origin: 100% 0;

    opacity: 0;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
figure.effect-layla figcaption::after
{
    position: absolute;
    top: 30px;
    right: 50px;
    bottom: 30px;
    left: 50px;

    content: '';
    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s; 
    -webkit-transform: scale(1, 0);
       -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
         -o-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;

    opacity: 0;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}
figure.effect-layla h2
{
    padding-top: 26%;

    -webkit-transition: -webkit-transform .35s;
       -moz-transition:         transform .35s, -moz-transform .35s;
         -o-transition:      -o-transform .35s;
            transition: -webkit-transform .35s;
            transition:         transform .35s;
            transition:         transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, -30px, 0);
       -moz-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
}
figure.effect-layla p
{
    padding: .5em 2em;

    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s; 
    -webkit-transform: translate3d(0, -10px, 0);
       -moz-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
    text-transform: none;

    opacity: 0;
}
figure.effect-layla:hover img
{
    -webkit-transition-delay: .15s;
       -moz-transition-delay: .15s;
         -o-transition-delay: .15s;
            transition-delay: .15s; 
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);

    opacity: .7;
}
figure.effect-layla:hover figcaption::before
{
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1); 

    opacity: 1;
}
figure.effect-layla:hover figcaption::after
{
    -webkit-transition-delay: .15s;
       -moz-transition-delay: .15s;
         -o-transition-delay: .15s;
            transition-delay: .15s; 
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);

    opacity: 1;
}
figure.effect-layla:hover h2
{
    -webkit-transition-delay: .15s;
       -moz-transition-delay: .15s;
         -o-transition-delay: .15s;
            transition-delay: .15s; 
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);

    opacity: 1;
}
figure.effect-layla:hover p
{
    -webkit-transition-delay: .15s;
       -moz-transition-delay: .15s;
         -o-transition-delay: .15s;
            transition-delay: .15s; 
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);

    opacity: 1;
}

/*---------------*/
/***** Honey *****/
/*---------------*/
figure.effect-honey
{
    background: #4a3753;
}
figure.effect-honey img
{
    -webkit-transition: opacity .35s;
       -moz-transition: opacity .35s;
         -o-transition: opacity .35s;
            transition: opacity .35s; 

    opacity: .9;
}
figure.effect-honey:hover img
{
    opacity: .5;
}
figure.effect-honey:hover figcaption::before
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

    opacity: 1;
}
figure.effect-honey:hover h2
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

    opacity: 1;
}
figure.effect-honey:hover h2 i
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

    opacity: 1;
}
figure.effect-honey figcaption::before
{
    position: absolute;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 10px;

    content: '';
    -webkit-transition: -webkit-transform .35s;
       -moz-transition:         transform .35s, -moz-transform .35s;
         -o-transition:      -o-transform .35s;
            transition: -webkit-transform .35s;
            transition:         transform .35s;
            transition:         transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s; 
    -webkit-transform: translate3d(0, 10px, 0);
       -moz-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);

    background: #fff;
}
figure.effect-honey h2
{
    position: absolute;
    right: 0;
    bottom: 0;

    width: 100%;
    padding: 1em 1.5em;

    -webkit-transition: -webkit-transform .35s;
       -moz-transition:         transform .35s, -moz-transform .35s;
         -o-transition:      -o-transform .35s;
            transition: -webkit-transform .35s;
            transition:         transform .35s;
            transition:         transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s; 
    -webkit-transform: translate3d(0, -30px, 0);
       -moz-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
    text-align: right;
}
figure.effect-honey h2 i
{
    font-style: normal;

    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, -30px, 0);
       -moz-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0); 

    opacity: 0;
}

/*---------------*/
/***** Oscar *****/
/*---------------*/
figure.effect-oscar
{
    background: -webkit-linear-gradient(-45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
    background:    -moz-linear-gradient(-45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
    background:      -o-linear-gradient(-45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
    background: -webkit-linear-gradient(135deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
    background:    -moz-linear-gradient(135deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
    background:      -o-linear-gradient(135deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
    background:         linear-gradient(-45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
}
figure.effect-oscar img
{
    -webkit-transition: opacity .35s;
       -moz-transition: opacity .35s;
         -o-transition: opacity .35s;
            transition: opacity .35s; 

    opacity: .9;
}
figure.effect-oscar figcaption
{
    padding: 3em;

    -webkit-transition: background-color .35s;
       -moz-transition: background-color .35s;
         -o-transition: background-color .35s;
            transition: background-color .35s; 

    background-color: rgba(58, 52, 42, .7);
}
figure.effect-oscar figcaption::before
{
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;

    content: '';
    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
        -ms-transform: scale(0);
         -o-transform: scale(0);
            transform: scale(0); 

    opacity: 0;
    border: 1px solid #fff;
}
figure.effect-oscar h2
{
    margin: 20% 0 10px 0;

    -webkit-transition: -webkit-transform .35s;
       -moz-transition:         transform .35s, -moz-transform .35s;
         -o-transition:      -o-transform .35s;
            transition: -webkit-transform .35s;
            transition:         transform .35s;
            transition:         transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, 100%, 0);
       -moz-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
}
figure.effect-oscar p
{
    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
        -ms-transform: scale(0);
         -o-transform: scale(0);
            transform: scale(0); 

    opacity: 0;
}
figure.effect-oscar:hover h2
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
figure.effect-oscar:hover figcaption
{
    background-color: rgba(58, 52, 42, 0);
}
figure.effect-oscar:hover figcaption::before
{
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1); 

    opacity: 1;
}
figure.effect-oscar:hover p
{
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1); 

    opacity: 1;
}
figure.effect-oscar:hover img
{
    opacity: .4;
}

/*---------------*/
/***** Marley *****/
/*---------------*/
figure.effect-marley figcaption
{
    text-align: left;
}

figure.effect-marley h2
{
    position: absolute;
    top: 30px;
    right: 30px;
    left: 30px;

    padding: 10px 0;

    -webkit-transition: -webkit-transform .35s;
       -moz-transition:         transform .35s, -moz-transform .35s;
         -o-transition:      -o-transform .35s;
            transition: -webkit-transform .35s;
            transition:         transform .35s;
            transition:         transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, 20px, 0);
       -moz-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0);
}
figure.effect-marley h2::after
{
    position: absolute;
    top: 100%;
    right: 0;

    width: 100%;
    height: 4px;

    content: '';
    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s; 
    -webkit-transform: translate3d(0, 40px, 0);
       -moz-transform: translate3d(0, 40px, 0);
            transform: translate3d(0, 40px, 0);

    opacity: 0;
    background: #fff;
}

figure.effect-marley p
{
    line-height: 1.5;

    position: absolute;
    right: 30px;
    bottom: 30px;
    left: 30px;

    padding: 10px 0;

    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s; 
    -webkit-transform: translate3d(0, 100%, 0);
       -moz-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);

    opacity: 0;
}

figure.effect-marley:hover h2
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
figure.effect-marley:hover h2::after
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

    opacity: 1;
}

figure.effect-marley:hover p
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

    opacity: 1;
}

/*---------------*/
/***** Ruby *****/
/*---------------*/
figure.effect-ruby
{
    background-color: #17819c;
}
figure.effect-ruby img
{
    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: scale(1.15);
       -moz-transform: scale(1.15);
        -ms-transform: scale(1.15);
         -o-transform: scale(1.15);
            transform: scale(1.15); 

    opacity: .7;
}
figure.effect-ruby:hover img
{
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1); 

    opacity: .5;
}
figure.effect-ruby:hover h2
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
figure.effect-ruby:hover p
{
    -webkit-transform: translate3d(0, 0, 0) scale(1);
       -moz-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1); 

    opacity: 1;
}
figure.effect-ruby h2
{
    margin-top: 20%;

    -webkit-transition: -webkit-transform .35s;
       -moz-transition:         transform .35s, -moz-transform .35s;
         -o-transition:      -o-transform .35s;
            transition: -webkit-transform .35s;
            transition:         transform .35s;
            transition:         transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, 20px, 0);
       -moz-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0);
}
figure.effect-ruby p
{
    margin: 1em 0 0;
    padding: 3em;

    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, 20px, 0) scale(1.1);
       -moz-transform: translate3d(0, 20px, 0) scale(1.1);
            transform: translate3d(0, 20px, 0) scale(1.1); 

    opacity: 0;
    border: 1px solid #fff;
}

/*---------------*/
/***** Milo *****/
/*---------------*/
figure.effect-milo
{
    background: #2e5d5a;
}
figure.effect-milo img
{
    width: -webkit-calc(100% + 60px);
    width:    -moz-calc(100% + 60px);
    width:         calc(100% + 60px);
    max-width: none;

    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(30px, 0, 0) scale(1.12);
       -moz-transform: translate3d(30px, 0, 0) scale(1.12);
            transform: translate3d(30px, 0, 0) scale(1.12);

    opacity: 1;

    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
}
figure.effect-milo:hover img
{
    -webkit-transform: translate3d(0, 0, 0) scale(1);
       -moz-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1); 

    opacity: .5;
}
figure.effect-milo:hover p
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

    opacity: 1;
}
figure.effect-milo h2
{
    position: absolute;
    bottom: 0;
    left: 0;

    padding: 1em 1.2em;
}
figure.effect-milo p
{
    width: 50%;
    padding: 0 0 0 10px;

    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(40px, 0, 0);
       -moz-transform: translate3d(40px, 0, 0);
            transform: translate3d(40px, 0, 0); 
    text-align: left;

    opacity: 0;
    border-left: 1px solid #fff;
}

/*---------------*/
/***** Dexter *****/
/*---------------*/
figure.effect-dexter
{
    background: -webkit-linear-gradient(top, #258dc8 0%, #683c13 100%);
    background: -webkit-gradient(linear, right top, right bottom, from(#258dc8), to(#683c13));
    background:    -moz-linear-gradient(top, #258dc8 0%, #683c13 100%);
    background:      -o-linear-gradient(top, #258dc8 0%, #683c13 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#258dc8), to(#683c13));
    background:         linear-gradient(to bottom, #258dc8 0%, #683c13 100%);
}
figure.effect-dexter img
{
    -webkit-transition: opacity .35s;
       -moz-transition: opacity .35s;
         -o-transition: opacity .35s;
            transition: opacity .35s;
}
figure.effect-dexter:hover img
{
    opacity: .4;
}
figure.effect-dexter:hover figcaption::after
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
figure.effect-dexter:hover p
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

    opacity: 1;
}
figure.effect-dexter figcaption
{
    padding: 3em;

    text-align: right;
}
figure.effect-dexter figcaption::after
{
    position: absolute;
    right: 30px;
    bottom: 30px;
    left: 30px;

    height: -webkit-calc(50% - 30px);
    height:    -moz-calc(50% - 30px);
    height:         calc(50% - 30px);

    content: '';
    -webkit-transition: -webkit-transform .35s;
       -moz-transition:         transform .35s, -moz-transform .35s;
         -o-transition:      -o-transform .35s;
            transition: -webkit-transform .35s;
            transition:         transform .35s;
            transition:         transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, -100%, 0);
       -moz-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0); 

    border: 7px solid #fff;
}
figure.effect-dexter p
{
    position: absolute;
    right: 60px;
    bottom: 60px;
    left: 60px;

    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, -100px, 0);
       -moz-transform: translate3d(0, -100px, 0);
            transform: translate3d(0, -100px, 0); 

    opacity: 0;
}

/*---------------*/
/***** Sarah *****/
/*---------------*/
figure.effect-sarah
{
    background: #42b078;
}
figure.effect-sarah img
{
    width: -webkit-calc(100% + 20px);
    width:    -moz-calc(100% + 20px);
    width:         calc(100% + 20px);
    max-width: none;

    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(10px, 0, 0);
       -moz-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);

    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
}
figure.effect-sarah:hover img
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

    opacity: .4;
}
figure.effect-sarah:hover h2::after
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
figure.effect-sarah:hover p
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

    opacity: 1;
}
figure.effect-sarah figcaption
{
    text-align: right;
}
figure.effect-sarah h2
{
    position: relative;

    overflow: hidden;

    padding: .5em 0;
}
figure.effect-sarah h2::after
{
    position: absolute;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    content: '';
    -webkit-transition: -webkit-transform .35s;
       -moz-transition:         transform .35s, -moz-transform .35s;
         -o-transition:      -o-transform .35s;
            transition: -webkit-transform .35s;
            transition:         transform .35s;
            transition:         transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(100%, 0, 0);
       -moz-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0); 

    background: #fff;
}
figure.effect-sarah p
{
    padding: 1em 0;

    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(-100%, 0, 0);
       -moz-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0); 

    opacity: 0;
}

/*---------------*/
/***** Zoe *****/
/*---------------*/
figure.effect-zoe figcaption
{
    top: auto;
    bottom: 0;

    height: 3.75em;
    padding: 1em;

    -webkit-transition: -webkit-transform .35s;
       -moz-transition:         transform .35s, -moz-transform .35s;
         -o-transition:      -o-transform .35s;
            transition: -webkit-transform .35s;
            transition:         transform .35s;
            transition:         transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, 100%, 0);
       -moz-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0); 

    color: #3c4a50;
    background: #fff;
}

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

    -webkit-transition: -webkit-transform .35s;
       -moz-transition:         transform .35s, -moz-transform .35s;
         -o-transition:      -o-transform .35s;
            transition: -webkit-transform .35s;
            transition:         transform .35s;
            transition:         transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, 200%, 0);
       -moz-transform: translate3d(0, 200%, 0);
            transform: translate3d(0, 200%, 0);
}

figure.effect-zoe p.icon-links a
{
    font-size: 1.4em;

    float: left;

    -webkit-transition: -webkit-transform .35s;
       -moz-transition:         transform .35s, -moz-transform .35s;
         -o-transition:      -o-transform .35s;
            transition: -webkit-transform .35s;
            transition:         transform .35s;
            transition:         transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: translate3d(0, 200%, 0);
       -moz-transform: translate3d(0, 200%, 0);
            transform: translate3d(0, 200%, 0); 

    color: #3c4a50;
}
figure.effect-zoe p.icon-links a span::before
{
    font-family: 'feathericons';

    display: inline-block;

    padding: 8px 10px;

    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

figure.effect-zoe:hover p.icon-links a
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
figure.effect-zoe:hover p.icon-links a:hover
{
    color: #252d31;
}
figure.effect-zoe:hover p.icon-links a:focus
{
    color: #252d31;
}
figure.effect-zoe:hover p.icon-links a:nth-child(3)
{
    -webkit-transition-delay: .1s;
       -moz-transition-delay: .1s;
         -o-transition-delay: .1s;
            transition-delay: .1s;
}
figure.effect-zoe:hover p.icon-links a:nth-child(2)
{
    -webkit-transition-delay: .15s;
       -moz-transition-delay: .15s;
         -o-transition-delay: .15s;
            transition-delay: .15s;
}
figure.effect-zoe:hover p.icon-links a:first-child
{
    -webkit-transition-delay: .2s;
       -moz-transition-delay: .2s;
         -o-transition-delay: .2s;
            transition-delay: .2s;
}

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

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

figure.effect-zoe:hover h2
{
    -webkit-transition-delay: .05s;
       -moz-transition-delay: .05s;
         -o-transition-delay: .05s;
            transition-delay: .05s; 
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

figure.effect-zoe p.description
{
    font-size: 90%;

    position: absolute;
    bottom: 8em;

    padding: 2em;

    -webkit-transition: opacity .35s;
       -moz-transition: opacity .35s;
         -o-transition: opacity .35s;
            transition: opacity .35s;
    text-transform: none;

    opacity: 0;
    color: #fff;

    -webkit-backface-visibility: hidden;
}

.icon-eye::before
{
    content: '\e087';
}

.icon-paper-clip::before
{
    content: '\e093';
}

.icon-heart::before
{
    content: '\e08a';
}

/*---------------*/
/***** Chico *****/
/*---------------*/
figure.effect-chico img
{
    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: scale(1.12);
       -moz-transform: scale(1.12);
        -ms-transform: scale(1.12);
         -o-transform: scale(1.12);
            transform: scale(1.12);
}

figure.effect-chico:hover img
{
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1); 

    opacity: .5;
}

figure.effect-chico:hover figcaption::before
{
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1); 

    opacity: 1;
}

figure.effect-chico:hover p
{
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1); 

    opacity: 1;
}

figure.effect-chico figcaption
{
    padding: 3em;
}
figure.effect-chico figcaption::before
{
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;

    content: '';
    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s; 
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);

    opacity: 0;
    border: 1px solid #fff;
}

figure.effect-chico p
{
    max-width: 200px;
    margin: 0 auto;

    -webkit-transition: opacity .35s, -webkit-transform .35s;
       -moz-transition: opacity .35s, transform .35s, -moz-transform .35s;
         -o-transition: opacity .35s, -o-transform .35s;
            transition: opacity .35s, -webkit-transform .35s;
            transition: opacity .35s, transform .35s;
            transition: opacity .35s, transform .35s, -webkit-transform .35s, -moz-transform .35s, -o-transform .35s;
    -webkit-transform: scale(1.5);
       -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
         -o-transform: scale(1.5);
            transform: scale(1.5); 

    opacity: 0;
}

figure.effect-chico h2
{
    padding: 20% 0 20px 0;
}

@media screen and (max-width: 50em)
{
    .content
    {
        padding: 0 10px;
    }
    .grid figure
    {
        display: inline-block;
        float: none;

        width: 100%; 
        margin: 10px auto;
    }
}