/* element-item
------------------------- */

.element-item {
    position: relative;
    float: left;
    width: 32%;
    height: auto;
    margin: 5px;
    padding: 1% 3%;
    color: #262524;
    margin-bottom:2%;
}

    .element-item > * {
        margin: 0;
        padding: 0;
    }

   

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

.grid {
    background: none;    width: 100%;
    position: relative;
}

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

/* ---- counting ---- */

.grid--counting {
    counter-reset: item;
}

    .grid--counting .grid-item:before {
        counter-increment: item;
        content: counter(item);
        display: block;
        color: #555;
        padding-top: 0.2em;
        text-align: center;
        font-size: 18px;
    }

/* ---- horizontal ---- */

/* horizontal examples need height */
.grid--horizontal {
    height: 334px;
}

/* ---- static banner ---- */

.grid--has-banner {
    position: relative;
}

.static-banner {
    position: absolute;
    left: 10px;
    top: 10px;
    background: hsla(210, 100%, 50%, 0.8);
    z-index: 1;
    padding: 2px 20px;
    color: white;
    pointer-events: none;
}

/* ---- fixed-width ---- */

.grid--fixed-width {
    width: 304px;
}

/* ---- stamp ---- */

.grid--has-stamp {
    position: relative;
}

/* ---- fit-width ---- */

/* centered */
.grid--fit-width {
    margin: 0 auto;
}

/* grid-image-item
------------------------- */

.grid-image-item,
.grid--images .grid-sizer {
    width: 33.33%;
}

.grid-image-item {
    float: left;
}

    .grid-image-item img {
        display: block;
        max-width: 100%;
    }

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

.grid-item {
    float: left;
    width: 50px;
    height: 50px;
    background: #e6e5e4;
    border: 2px solid #b6b5b4;
    border-color: hsla(0, 0%, 0%, 0.4);
}

.grid-item--width2 {
    width: 100px;
}

.grid-item--height2 {
    height: 100px;
}

.grid-item--width3 {
    width: 150px;
}

.grid-item--height3 {
    height: 150px;
}

.grid-item--gigante {
    width: 150px;
    height: 200px;
}

.grid--clickable .grid-item:hover {
    border-color: #28F;
    background: #8CF;
    cursor: pointer;
}

/* ---- insert demo ---- */

.grid-item .number {
    line-height: 50px;
    text-align: center;
    color: #333;
    margin: 0;
    font-size: 1.3rem;
}

/* ---- fluid-5-col ---- */

.grid--fluid-5-col .grid-item,
.grid--fluid-5-col .grid-sizer {
    width: 20%;
}

.grid--fluid-5-col .grid-item--width2 {
    width: 40%;
}

/* ---- grid--masonry-gutter ---- */

.grid--has-gutter .grid-item--width2 {
    width: 110px;
}

/* ---- grid--masonry-gutter-bottom ---- */

.grid--masonry-gutter-bottom .grid-item {
    margin-bottom: 10px;
}

.grid--masonry-gutter-bottom .grid-item--height2 {
    height: 110px;
}

/* ---- grid--packery-gutter ---- */

.grid--packery-gutter .grid-item--width2 {
    width: 110px;
}

.grid--packery-gutter .grid-item--height2 {
    height: 110px;
}

/* ---- grid--fluid-gutter ---- */

.grid--fluid-gutter .grid-item,
.grid--fluid-gutter .grid-sizer {
    width: 22%;
}

.grid--fluid-gutter .gutter-sizer {
    width: 4%;
}

.grid--fluid-gutter .grid-item--width2 {
    width: 48%;
}

/* ---- masonry-horizontal ---- */

.grid--masonry-horizontal-gutter .grid-item--height2 {
    height: 110px;
}

/* ----  ---- */

.grid--masonry-horizontal-gutter-right .grid-item {
    margin-right: 10px;
}

.grid--masonry-horizontal-gutter-right .grid-item--width2 {
    width: 110px;
}

/* ---- cells-by-row-element-sizing ---- */

.grid--cells-by-row-element-sizing .grid-item {
    width: 13%;
}

.grid--cells-by-row-element-sizing .grid-item--width2 {
    width: 23%;
}

.grid--cells-by-row-element-sizing .grid-sizer {
    width: 25%;
    height: 110px;
}

/* ---- cells-by-column-element-sizing ---- */

.grid--cells-by-column-element-sizing .grid-item {
    height: 13%;
}

.grid--cells-by-column-element-sizing .grid-item--width2 {
    height: 23%;
}

.grid--cells-by-column-element-sizing .grid-sizer {
    height: 25%;
    width: 110px;
}

/* ---- fitrows-gutter ---- */

.grid--fit-rows-gutter .grid-item--width2 {
    width: 110px;
}

.grid--fit-rows-gutter .grid-item--width3 {
    width: 170px;
}

/* grid-splash-item
------------------------- */

.grid-splash-item {
    float: left;
    width: 100px;
    height: 100px;
    margin: 5px;
    padding: 20px;
    background: red;
    color: white;
    font-size: 3.0rem;
    font-weight: bold;
    line-height: 1.0;
}

.grid-splash-item--width2 {
    width: 210px;
}

.grid-splash-item--height2 {
    height: 210px;
}

.grid-splash-item:nth-child(10n+0) {
    background: hsl( 0, 100%, 50%);
}

.grid-splash-item:nth-child(10n+1) {
    background: hsl( 36, 100%, 50%);
}

.grid-splash-item:nth-child(10n+2) {
    background: hsl( 72, 100%, 50%);
}

.grid-splash-item:nth-child(10n+3) {
    background: hsl( 108, 100%, 50%);
}

.grid-splash-item:nth-child(10n+4) {
    background: hsl( 144, 100%, 50%);
}

.grid-splash-item:nth-child(10n+5) {
    background: hsl( 180, 100%, 50%);
}

.grid-splash-item:nth-child(10n+6) {
    background: hsl( 216, 100%, 50%);
}

.grid-splash-item:nth-child(10n+7) {
    background: hsl( 252, 100%, 50%);
}

.grid-splash-item:nth-child(10n+8) {
    background: hsl( 288, 100%, 50%);
}

.grid-splash-item:nth-child(10n+9) {
    background: hsl( 324, 100%, 50%);
}



/* in-use-grid
------------------------- */

.in-use-grid .grid-sizer,
.in-use-grid__item {
    width: 23.5%;
}

.in-use-grid .gutter-sizer {
    width: 2%;
}

.in-use-grid__item {
    display: block;
    background: #161615;
    float: left;
    margin-bottom: 20px;
    border-radius: 5px;
}

.in-use-grid__item__title {
    margin: 0;
    padding: 10px;
}

.in-use-grid__item__image {
    display: block;
    max-width: 100%;
    border-radius: 0 0 5px 5px;
}

/* grid-multi-item
------------------------- */

.grid-multi-item {
    float: left;
    width: 100px;
    height: 100px;
    background: #e6e5e4;
    border: 2px solid #b6b5b4;
    border-color: hsla(0, 0%, 0%, 0.4);
}

    .grid-multi-item[data-color="blue"] {
        background: blue;
    }

    .grid-multi-item[data-color="red"] {
        background: red;
    }

    .grid-multi-item[data-color="yellow"] {
        background: yellow;
    }

    .grid-multi-item .number {
        font-size: 4.0rem;
        font-weight: 600;
        color: #222;
        padding-top: 0.1em;
        text-align: center;
        line-height: 90px;
    }




/* selected */
.page--filtering .site-nav__item--filtering .site-nav__item__link,
.page--sorting .site-nav__item--sorting .site-nav__item__link,
.page--layout .site-nav__item--layout .site-nav__item__link,
.page--layout-modes .site-nav__item--layout-modes .site-nav__item__link,
.page--options .site-nav__item--options .site-nav__item__link,
.page--methods .site-nav__item--methods .site-nav__item__link,
.page--events .site-nav__item--events .site-nav__item__link,
.page--draggable .site-nav__item--draggable .site-nav__item__link,
.page--license .site-nav__item--license .site-nav__item__link,
.page--appendix .site-nav__item--appendix .site-nav__item__link,
.page--faq .site-nav__item--faq a {
    color: #4Bf;
    background: #161615;
}


/* stamp
------------------------- */

.stamp {
    position: absolute;
    width: 30%;
    height: 60px;
    background: orange;
    border: 4px dotted #161615;
}

/* ---- stamp-option-demo ---- */

.stamp--stamp-option-demo-stamp1 {
    left: 30%;
    top: 10px;
    width: 20%;
    height: 100px;
}

.stamp--stamp-option-demo-stamp2 {
    right: 10%;
    top: 20px;
    width: 70%;
    height: 30px;
}

.stamp--packery {
    right: 20%;
    top: 80px;
    width: 45%;
    height: 90px;
}

/* stamp-methods-demo
------------------------- */

.grid--stamp-methods-demo .grid-item {
    opacity: 0.8;
}

.stamp--stamp-methods-demo {
    left: 10px;
    top: 10px;
}
/* ui-group
------------------------- */

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

.ui-group__title {
    display: inline-block;
    vertical-align: top;
    font-size: 1.2rem;
    line-height: 40px;
    margin: 0 10px 0 0;
    font-weight: bold;
}

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


/* vertical-list
------------------------- */

.vertical-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 2px solid #484542;
    background: hsla(0, 0%, 0%, 0.15);
}

.vertical-list__item {
    width: 100%;
    border-top: 1px solid #484542;
}

    .vertical-list__item > * {
        display: inline-block;
        padding: 3px 4px;
    }

    .vertical-list__item .name {
        width: 20%;
    }

    .vertical-list__item .symbol {
        width: 10%;
    }

    .vertical-list__item .weight {
        width: 15%;
    }

    .vertical-list__item .number {
        width: 10%;
    }

    .vertical-list__item .category {
        width: 25%;
    }