/**** Masonry CSS ****/

.wrap {
    background: none repeat scroll 0 0 #F2F2F2;
    border: 0 solid #456;
    clear: both;
    margin-bottom: 20px;
    padding: 10px;
}
.box.black:first-child {
    display: block !important;
    text-align: center;
    box-shadow: none;
    margin-bottom: 10vh;
}
.box.black:first-child > div {
    margin: 0 auto;
}
.box {
    box-shadow: 0 20px 40px 5px rgba(0, 0, 0, 0.1);
    display: block !important;
    margin: 10vh auto;
}
.box:not(:first-child) {
    max-width: 1040px;
}
.wrapper img {
    height: auto;
    width: 100%;
}
/**** Primer comparison ****/

#comparison {
    overflow: auto;
}
#comparison .example {
    float: left;
    margin-right: 20px;
    width: 420px;
}
#comparison .box h5 {
    color: #F2F2F2;
    float: left;
    font-size: 30px;
    font-weight: bold;
    line-height: 28px;
    margin-bottom: 0;
    margin-right: 4px;
}
/**** Filtering nav ****/

.box.red,
#filtering-nav .red {
    background-color: #d26;
    color: #F2F2F2;
}
#filtering-nav .all {
    background-color: #F2F2F2;
}
#filtering-nav {
    margin: 2em 0;
    padding: 0;
}
#filtering-nav li {
    float: left;
    list-style: none outside none;
}
#filtering-nav li a {
    background-image: -moz-linear-gradient(-90deg, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0));
    border-radius: 5px;
    box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.3);
    display: block;
    margin-right: 5px;
    padding: 0.5em 1em;
}
#filtering-nav li a:active {
    background-image: -moz-linear-gradient(-90deg, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2));
    box-shadow: 0 1px 8px hsla(0, 0%, 0%, 0.6) inset;
}
/**** Clearfixes ****/

.wrap:after,
#tumblelog:after,
#filtering-nav:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}