@charset "UTF-8";

/* ISOTOPE */

/* ---- button-group ---- */

.button-group:after {
    content: '';
    display: block;
    clear: both;
}
.filter-link {
    cursor: pointer;
    cursor: hand;
}

/* ---- isotope ---- */

.grid {
    background: #EEE;
    max-width: 1200px;
}
/* clear fix */
.grid:after {
    content: '';
    display: block;
    clear: both;
}

/* ---- grid ---- */

.grid {
    background: #fff;
}
/* clear fix */
.grid:after {
    content: '';
    display: block;
    clear: both;
}
/* ---- .element-item ---- */

/* 5 columns, percentage width */
.grid-item, .grid-sizer {
    width: 33.333%;
}
.grid-item {
    float: left;
    height: 200px;
    border: 2px solid #fff;
    position: relative;
    background-color: #ccc;
    overflow: hidden;
}
.grid-item--width2 {
    width: 66.666%;
}
.grid-item--height2 {
    height: 200px;
}
.grid-item img {
    width: 100%;
}
.grid-item span, .grid-item--height2 span {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 .5em;
    background: #000;
    height: 3em;
    line-height:1.3;
    width: 100%;
    color: #fff;
    zoom: 1;
    filter: alpha(opacity=75);
    opacity: 0.75;
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
.grid-item span,  .grid-item--height2 span {
    font-size: .7em;
}
.grid-item--width2 {
    width: 33.333%;
}
.grid-item, .grid-item--height2 {
    height: 75px;
}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.grid-item span,  .grid-item--height2 span {
    font-size: .7em;
}
.grid-item--width2 {
    width: 33.333%;
}
.grid-item, .grid-item--height2 {
    height: 75px;
}
}