/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

ol {
    list-style: none;
}

input[type="radio"] {
    position: absolute;
    left: -9999px;
}


/* FILTERS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.filters {
    text-align: center;
    margin-bottom: 2rem;
}

.filters * {
    display: inline-block;
    height: 1.75rem;
    line-height: 4rem;
}

.filters label {
    cursor: pointer;
}


/* FILTERED ELEMENTS (POSTS)
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.posts {
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: center;
    justify-content: center;
}

.posts .post {
    background: #fafafa;
    border: 0px;
    margin: 1rem;
}

.posts .post a {
    box-shadow: 0 0px transparent, 0 0px transparent, 0 0px transparent, 0px 0 transparent;
}

.posts .post a:hover {
    border: 0px;
    box-shadow: 0 0px transparent, 0 0px transparent, 0 0px transparent, 0px 0 transparent;
}

.posts figcaption {
    padding: 1rem;
}

.posts .post-categories * {
    display: inline-block;
}


/* FILTERING RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[value="All"]:checked~.filters [for="All"],
[value="dev-frontend"]:checked~.filters [for="dev-frontend"],
[value="animation"]:checked~.filters [for="animation"],
[value="design-digital"]:checked~.filters [for="design-digital"],
[value="design-ui"]:checked~.filters [for="design-ui"],
[value="design-print"]:checked~.filters [for="design-print"],
[value="photography"]:checked~.filters [for="photography"] {
    box-shadow: 0 0px transparent, 0 0px transparent, 0 4px black, 0px 0 transparent;
    line-height: 30px;
    margin-bottom: 10px;
}

[value="All"]:checked~.posts [data-category] {
    display: block;
}

[value="dev-frontend"]:checked~.posts .post:not([data-category~="dev-frontend"]),
[value="animation"]:checked~.posts .post:not([data-category~="animation"]),
[value="design-digital"]:checked~.posts .post:not([data-category~="design-digital"]),
[value="design-ui"]:checked~.posts .post:not([data-category~="design-ui"]),
[value="design-print"]:checked~.posts .post:not([data-category~="design-print"]),
[value="photography"]:checked~.posts .post:not([data-category~="photography"]) {
    display: none;
}

@media screen and (max-width: 900px) {
    .posts {
        margin: 0 auto;
        padding: 0px;
    }
    .container.row.posts {
        padding: 0 0px;
    }
}