/*
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
GRID
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
*/

#filter {
    background: #2c2e30;
    position:fixed;
    left:100%;
    height:101%;
    overflow:auto;
    }

#filter ul {
    margin:0;
    padding:0;
    width: 100%;
    height:500px;
    }

#filter ul li {
    border-bottom: 1px solid rgba(255,255,255,0.125);
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    font-size:0.875em;
    display:block;
    padding:0.875em 0 0.875em 0;
    margin:0 0 0 1.25em;
    }

#filter ul li:hover,
#filter ul li.selected {
    color: rgba(255,255,255,1);
    }

#filter, main, footer {
    -webkit-transition: 200ms ease;
            transition: 200ms ease;
    }

#filter.open {
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
    }
.ov {
    background: rgba(255,255,255,0.4);
    display:block;
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    opacity:0;
    top:-200%;
    -webkit-transition: opacity 500ms ease;
            transition: opacity 500ms ease;
    -webkit-transition-delay: 150ms;
            transition-delay: 150ms;
    z-index:2;
    }

.ov.open {
    opacity:1;
    top:0;
    }

figcaption {
    bottom:1em;
    color:#FFF;
    font-size:18px;
    left:0;
    padding:0;
    pointer-events:none;
    position:absolute;
    margin:0;
    text-align:left;
    white-space: nowrap;
    }

figcaption p,
figcaption ul {
    -webkit-transition: 160ms ease;
    transition:         160ms ease;
    }

figcaption p,
figcaption li {
    background-color: #2c2e30;
    display:inline-block;
    line-height:0;
    }

figcaption p {
    padding: 1.125em 0.75em;
    -webkit-transition-delay: 100ms;
            transition-delay: 100ms;
    -webkit-transform: translateX(-101%);
        -ms-transform: translateX(-101%);
            transform: translateX(-101%);
    }

figcaption ul {
    padding: 0;
    -webkit-transform: translateX(-101%);
        -ms-transform: translateX(-101%);
            transform: translateX(-101%);
    }

figcaption li {
    font-size: 0.75em;
    padding-top: 1.25em;
    padding-bottom: 1.25em;
    }

figcaption li:before {
    color: rgba(255,255,255,0.3);
    content: " | ";
    padding-left:0.625em;
    padding-right:0.625em;
    }

figcaption li:first-of-type:before {
    content: "";
    padding-left:1.125em;
    padding-right:0;
    }

figcaption li:last-of-type {
    padding-right:0.875em;
    }

@media all and (max-width: 479px) {
    figure,
    #filter { width: 50%; }
    main.open,
    footer.open {
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
        }
    }

@media all and (min-width: 480px) and (max-width: 1279px) {

    figure,
    #filter { width: 33.3333%; }

    main.open,
    footer.open {
        -webkit-transform: translateX(-33.3333%);
            -ms-transform: translateX(-33.3333%);
                transform: translateX(-33.3333%);
        }

    }

@media all and (min-width: 680px){

    #filter { margin:5em 0 0 0; }

    }

@media all and (max-width: 679px) {

    #filter { margin:3.75em 0 0 0; }

    }

@media all and (min-width: 860px) {

    figure:hover > figcaption ul {
        -webkit-transition-delay: 200ms;
        transition-delay:         200ms;
        }

    figure:hover > figcaption p,
    figure:hover > figcaption ul {
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
        }

    }

@media all and (max-width: 999px) {

    figcaption { font-size:16px; }

    }


@media all and (min-width: 1280px){

    figure, #filter { width: 25%; }

    main.open, footer.open {
        -webkit-transform: translateX(-25%);
            -ms-transform: translateX(-25%);
                transform: translateX(-25%);
        }

    }