/* varying sizes */
.is-varying-sizes .item.size1 { width: calc(16.666666667%*1); height: auto; }

.is-varying-sizes .item.size2 { width: calc(33.333333333%*1); height: auto; }

.is-varying-sizes .item.size3 { width: calc(16.666666667%*1); height: auto; }

.is-varying-sizes .item.size4 { width: calc(33.333333333%*1); height: auto; }

.is-varying-sizes .item.size1 h1{
	margin-top: calc(100%/2.5);
	font-size: 20pt;
}

.is-varying-sizes .item.size2 h1{
	margin-top: calc(100%/4.5);
	font-size: 20pt;	
}

.is-varying-sizes .item.size3 h1{
	margin-top: calc(100%/1.1);
	font-size: 20pt;
}

.is-varying-sizes .item.size4 h1 {
	margin-top: calc(100%/2.5);
	font-size: 35pt;
}

.abc { background: lightgreen; }
.bcd { background: lightblue; }
/* ---- mini items ---- */

.item img {
	width: 100%;
	height: auto;
}

figure.hovercase {
	font-family: "neutra", sans-serif;
	font-size: 30.75pt;
	text-align:center;
	color: #fafafa;
	line-height: 0;
    background:#fafafa;
}	

figure.hovercase img {
	width: 100%;
	height: auto;
    filter:grayscale(1) sepia(.5);
    -webkit-filter:grayscale(1) sepia(.5);
}

figure.hovercase figcaption {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	line-height: normal !important;
}

figure.hovercase:hover img {
	filter:grayscale(0) sepia(0);
    -webkit-filter:grayscale(0) sepia(0);
}

figure.hovercase:hover figcaption {
	opacity: 1;
	background-color: rgba(133,2,5,.4);
	cursor:pointer;
}

figure.hovercase figcaption h1 {
	opacity: 0;
    font-weight: 700;
}

figure.hovercase figcaption h5 {
	opacity: 0;
	font-weight:300;
    font-size:1.5rem;
}

figure.hovercase:hover figcaption h1,
figure.hovercase:hover figcaption h5 {
	opacity: 1;
}



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



/* ---- individual demos ---- */

/* flexible 5 columns */
.flex-5-col .grid-sizer,
.flex-5-col .mini-item { width: 20%; }
.flex-5-col .mini-item.w2 { width: 40%; }
.flex-5-col .gutter-sizer { width: 5%; }

/* flexible 4 columns */
.flex-4-col .grid-sizer,
.flex-4-col .mini-item { width: 22.2%; }
.flex-4-col .mini-item.w1 { width: 22.2%; }
.flex-4-col .mini-item.w2 { width: 45.4%; }
.flex-4-col .mini-item.w3 { width: 68.6%; }
.flex-4-col .mini-item.w4 { width: 91.8%; }
.flex-4-col .gutter-sizer { width: 0%; }

/* masonry gutter */
.masonry-gutter .mini-item.w2,
.packery-gutter .mini-item.w2 { width: 110px; }

.packery-gutter .mini-item.h2 { height: 110px; }

/* masonry bottom spaced */
#masonry-bottom-spaced .mini-item {
  margin-bottom: 0;
}
#masonry-bottom-spaced .mini-item.h2 {
  height: 110px;
}

/* flexible 4 columns w/ gutter */
.flex-4-col-gutter .grid-sizer,
.flex-4-col-gutter .mini-item { width: 22%; }
.flex-4-col-gutter .mini-item.w2 { width: 48%; }
.flex-4-col-gutter .gutter-sizer { width: 4%; }

/* masonry flex gutter */
#masonry-flex-gutter .gutter-sizer {
  width: 0;
}

#masonry-horizontal-right-spaced .mini-item {
  margin-right: 10px;
}

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

#masonry-fit-width {
  border: 2px solid white;
}

/* center container with CSS */
#masonry-fit-width .isotope {
  margin: 10px auto;
}

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

.cells-by-row-element-sizing .mini-item { width: 10.5%; }

.cells-by-row-element-sizing .mini-item.w2 { width: 23%; }

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

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

.cells-by-row-column-sizing .mini-item { height: 10.5%; }

.cells-by-row-column-sizing .mini-item.w2 { height: 23%; }

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

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

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

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

/* ---- measurement demos ---- */

#gutter-opt-demo2 .item {
  margin-bottom: 10px;
}

/* responive column width */
#column-width-demo2 .grid-sizer { width: 20%; }
#column-width-demo2 .item { width: 20%; }
#column-width-demo2 .item.w2 { width: 40%; }

#row-height-demo2 .grid-sizer {
  height: 60px;
}

#gutter-opt-demo3 .gutter-sizer {
  width: 0;
}

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

.has-stamp {
  position: relative;
}

.demo .stamp {
  position: absolute;
  width: 30%;
  height: 60px;
  background: orange;
  border: 0;
}

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

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

#stamp-demo .stamp {
  right: 10%;
  top: 10px;
  width: 35%;
  height: 70px;
}

#stamp-demo .mini-item { opacity: 0.8; }

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

/* ---- clickable ---- */

.clickable .item:hover {
  border-color: white;
  background: #A2C;
  cursor: pointer;
}

/* ---- vertical table-like ---- */

.table-like {
  list-style: none;
  margin: 0;
  padding: 0;
}

.table-like > li {
  width: 100%;
  clear: both;
  border-top: 1px solid;
  border-color: hsla(0, 0%, 100%, 0.2);
}

/* clearfix */
.table-like > li:after {
  display: block;
  content: '';
  clear: both;
}

.table-like > li > * {
  float: left;
  padding: 2px 4px;
}

.table-like .name { width: 30%; }
.table-like .symbol { width: 10%; }
.table-like .weight { width: 15%; }
.table-like .number { width: 10%; }
.table-like .category { width: 20%; }

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

#fit-columns-feature-demo {
  height: 448px;
}

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

#insert-demo .mini-item .number {
  padding: 0px;
  font-size: 24px;
  font-weight: bold;
  color: #777;
  text-align: center;
  line-height: 50px;
}

/* ---- multiple-sort-by ---- */

#multiple-sort-by-demo .mini-item .number {
  font-size: 50px;
  font-weight: 600;
  color: #222;
  padding-top: 0.1em;
  text-align: center;
}

#multiple-sort-by-demo [data-color="blue"] { background: blue; }
#multiple-sort-by-demo [data-color="red"] { background: red; }
#multiple-sort-by-demo [data-color="yellow"] { background: yellow; }

/* ---- animate-item-size ---- */

/* item is invisible, but used for layout */
.isotope.animate-item-size-demo .item,
.isotope.animate-item-size-demo .item-content {
  width: 60px;
  height: 60px;
}

.isotope.animate-item-size-demo .item {
  border: none;
  background: transparent;
}

/* item-content is visible, and transitions size */
.animate-item-size-demo .item-content {
  width: 60px;
  height: 60px;
  background: #8DF;
  border: 0;
  border-color: hsla(0, 0%, 0%, 0.5);
  -webkit-transition: width 0.4s, height 0.4s;
     -moz-transition: width 0.4s, height 0.4s;
       -o-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;
}

.animate-item-size-demo .item:hover .item-content {
  border-color: white;
  background: #4BF;
}

/* both item and item content change size */
.animate-item-size-demo .item.is-expanded,
.animate-item-size-demo .item.is-expanded .item-content {
  width: 180px;
  height: 120px;
}

.animate-item-size-demo .item.is-expanded {
  z-index: 2;
}

.animate-item-size-demo .item.is-expanded .item-content {
  background: #F90;
}


/* ---- animate item size responsive ---- */

#animate-item-size-responsive .item,
#animate-item-size-responsive .grid-sizer {
  width: 20%;
}

#animate-item-size-responsive .item-content {
  width:  100%;
  height: 100%;
}

/* item has expanded size */
#animate-item-size-responsive .item.is-expanded {
  width: 60%;
}

/* ---- combination filters ---- */

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

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

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

.color-shape {
  width: 70px;
  height: 70px;
  margin: 5px;
  float: left;
}
 
.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; }