.assortmentRow {
        margin-left: -10px;
        margin-right: -10px;
    }

    .assortment {
        width: 33.33%;
        float: left;
        display: block;
        margin: 0;
        box-sizing: border-box;
        padding: 0 10px;
    }

    .assortment figure {
        position: relative;
        float: left;
        overflow: hidden;
        width: 100%;
        text-align: center;
        cursor: pointer;
        margin: 0;
        border: 1px solid #6d6d6d;
        margin-top: 15px;
    }

    .assortment figure img {
        position: relative;
        display: block;
        min-height: 100%;
        max-width: 100%;
        opacity: 0.8;
        margin: 0 auto;
        transition: all 0.2s ease;
    	filter: grayscale(100%);
    }

    .assortment figure figcaption::before,
    .assortment figure figcaption::after {
        pointer-events: none;
    }

    .assortment figure figcaption {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    figure.hoverEffect figcaption {
        top: auto;
        bottom: 0;
        padding: 1em 0;
        height: 20px;
        background: #6d6d6d;
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    figure.hoverEffect p.description {
        position: absolute;
        bottom: 55px;
        padding: 0 2em;
        color: #000;
        text-transform: none;
        opacity: 0;
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s;
        -webkit-backface-visibility: hidden;
    }

    figure.hoverEffect h3 a {
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(0, 200%, 0);
        transform: translate3d(0, 200%, 0);
        color: #fff;
        font-size: 18px;
        font-weight: 300;
        margin: 0;
        padding: 0 1em;
        text-align: left;
    }

    figure.hoverEffect:hover figcaption,
    figure.hoverEffect:hover h3 a {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    figure.hoverEffect:hover p.description {
        opacity: 1;
    }

    figure.hoverEffect:hover h3 {
        -webkit-transition-delay: 0.05s;
        transition-delay: 0.05s;
    }

    figure.hoverEffect:hover img {
        opacity: 0.3;
    }




    /*---------------*/
    /***** Milo *****/
    /*---------------*/

    figure.effect-milo {
        background: #ffffff;
        height: 350px;
    }

    figure.effect-milo img {
        max-width: none;
        width: -webkit-calc(100% + 10px);
        width: calc(100% + 10px);
        opacity: 1;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(-20px, 0, 0) scale(1.12);
        transform: translate3d(-20px, 0, 0) scale(1.12);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    figure.effect-milo:hover img {
        opacity: 0.5;
        -webkit-transform: translate3d(0, 0, 0) scale(1);
        transform: translate3d(0, 0, 0) scale(1);
    }

    figure.effect-milo h3 {
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 10px 1.2em;
        font-size: 18px;
        font-weight: 300;
        color: #444444;
        background-color: rgba(255, 255, 255, 0.7);
    }

    figure.effect-milo p {
        padding: 0 10px 0 0;
        width: 50%;
        border-right: 2px solid #d80342;
        text-align: right;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(-40px, 0, 0);
        transform: translate3d(-40px, 0, 0);
    }

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

    /*---------------*/
    /***** Sadie *****/
    /*---------------*/

    figure.effect-sadie {
        background: #ffffff;
        height: 350px;
    }

    figure.effect-sadie figcaption::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: -webkit-linear-gradient(top, rgba(216, 3, 66, 0) 0%, rgba(216, 3, 66, 0.8) 75%);
        background: linear-gradient(to bottom, rgba(216, 3, 66, 0) 0%, rgba(216, 3, 66, 0.8) 75%);
        content: '';
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
    }

    figure.effect-sadie.sadieGrey figcaption::before {
        background: -webkit-linear-gradient(top, rgba(108, 108, 108, 0) 0%, rgba(108, 108, 108, 0.8) 75%);
        background: linear-gradient(to bottom, rgba(108, 108, 108, 0) 0%, rgba(108, 108, 108, 0.8) 75%);
    }

    figure.effect-sadie h3 a {
        position: absolute;
        top: 40%;
        left: 0;
        width: 100%;
        font-size: 18px;
        font-weight: 300;
        color: #444444;
        -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);
        background-color: #FDC400;
        padding: 10px 0;
    }

    figure.effect-sadie figcaption::before,
    figure.effect-sadie p a {
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
    }

    figure.effect-sadie p a {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 2em;
        width: 100%;
        opacity: 0;
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
        box-sizing: border-box;
        color: #fff;
    }

    figure.effect-sadie:hover h3 a {
        -webkit-transform: translate3d(0, -40%, 0) translate3d(0, -40px, 0);
        transform: translate3d(0, -40%, 0) translate3d(0, -40px, 0);
        background: transparent;
        color: #fff;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.63);
    }

    figure.effect-sadie:hover figcaption::before,
    figure.effect-sadie:hover p a {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }


    @media (max-width:1080px) {

        .assortment {
            width: 50%;
        }
    }

    @media (max-width:750px) {

        figure.hoverEffect figcaption {
            height: 45px;
        }

        figure.hoverEffect p.description {
            bottom: 75px;
        }
    }

    @media (max-width:600px) {
        figure.effect-sadie {
            height: 175px;
        }
    }