* {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
}


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

.button {
    display: inline-block;
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    outline: inherit;
    cursor: pointer;
    text-align: left;
    
    line-height: 16px;
    padding-bottom: 7px;
}

.button:hover {

    color: #222;
}

.button:active,
.button.is-checked {
    color: #cc1001;
}

.button.is-checked {
    color: #cc1001;
}

.button:active {
    color: #cc1001;
}


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

.button-group:after {
    content: '';
    display: block;
    clear: both;
}

.button-group .button {

}

.button-group .button:first-child {
}

.button-group .button:last-child {
}


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

.grid {
    max-width: 1200px;
}


/* clear fix */

.grid:after {
    content: '';
    display: block;
    clear: both;
}


/* ui group */

.ui-group {
    display: inline-block;
}

.ui-group h3 {
    display: inline-block;
    vertical-align: top;
    line-height: 32px;
    margin-right: 0.2em;
    font-size: 16px;
}

.ui-group .button-group {
    display: inline-block;
    margin-right: 20px;
}


/* color-shape */

.color-shape {
    width: 150px;
    text-align: center;
    line-height: 13px;
    padding: 16px;
}

.color-shape.round {
    border-radius: 35px;
}

.color-shape.big.round {
    border-radius: 75px;
}

.color-shape.red {
    background: red;
}

.color-shape.blue {
    background: blue;
}

.color-shape.yellow {
    background: yellow;
}

.color-shape.wide,
.color-shape.big {
    width: 150px;
}

.color-shape.tall,
.color-shape.big {
    height: 150px;
}
.noresults{
    position: absolute;
    z-index: -1;
    overflow: hidden;
    color: rgb(100, 100, 100);
}
.filterresults{
    height: 430px;
    overflow-y: scroll;
}