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

.grid {
  border: 2px solid #484542;
  background: hsla(0, 0%, 0%, 0.15);
  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 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; }

/* ---- filter blocks ---- */

.grid-item--filter-block-red,
.grid-item--filter-block-blue {
  width: 60px;
  height: 60px;
}

.grid--filter-blocks-large .grid-item--filter-block-red,
.grid--filter-blocks-large .grid-item--filter-block-blue {
  width: 80px;
  height: 80px;
}

.grid-item--filter-block-red { background: #D00; }
.grid-item--filter-block-blue { background: #19F; }

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

.grid--hor-order .grid-item {
  width: 100px;
  height: 80px;
}

.grid--hor-order .grid-item--height2 { height: 100px; }
.grid--hor-order .grid-item--height3 { height: 120px; }

/* 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%); }


/* 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: #19F; }
.grid-multi-item[data-color="red"] { background: #D00; }
.grid-multi-item[data-color="yellow"] { background: #FD0; }

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

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

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

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

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

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

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

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

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

.stamp--stamp-methods {
  left: 10px;
  top: 10px;
}
/* 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%; }