.grid {
	  border: solid 1px #ccc padding: 10px 10px 0 0;
	}

	.grid li {
	  position: relative;
	  float: left;
	  width: 200px;
	  height: 290px;
	  margin: 5px;
	  padding: 10px;
	  background: #fff;
	  background-image: url("img/pdf05.png");
	  color: #262524;
	  overflow:hidden;
	  -moz-background-size: 100% 100%;
	  -webkit-background-size: 100% 100%;
	  background-size: 100% 100%;
	}

	.grid li .element-item-name
	 {
	  position: absolute;
	  bottom:0;
	  margin: 15px;
	  text-transform: none;
	  letter-spacing: 1px;
	  line-height: 15px;
	  font-size: 14px;
	  font-weight: normal;
	  color: #fff;
	  text-shadow: -2px 2px 3px #454545;
	}

	.grid li .element-item-name a
	 {
	  color: #fff;
	}

	.grid li .element-item-symbol {
	  position: absolute;
	  left: 0px;
	  top: 0px;
	  width: 298px;
	  height: 155px;
	  margin: 1px;
	  padding: 0px;
	  background: #d7d5fb;
	  color: #262524;
	  overflow:hidden;
	}

	.grid li .element-item-number {
	  position: absolute;
	  right: 14px;
	  top: 12px;
	  text-align: right;
	  font-size: 13px;
	  font-weight: normal;
	  color: white;
	  text-shadow: -1px 1px 2px #000000;
	}

	.grid li .element-item-weight {
	  position: absolute;
	  left: 14px;
	  top: 130px;
	  font-size: 13px;
	  font-weight: normal;
	  color: white;
	  text-shadow: -1px 1px 2px #000000;
	}

	.grid li .element-item-date {
	  position: absolute;
	  right: 6px;
	  top: 310px;
	  text-align: right;
	  font-size: 12px;
	  font-weight: normal;
	  color: #fff;
	}

	.grid li .element-item-folio {
	  position: absolute;
	  left: 6px;
	  top: 310px;
	  text-align: left;
	  font-size: 12px;
	  font-weight: normal;
	  color: #fff;
	}

	img {
		position: absolute;
		max-width: 100%;
		height: auto;
		filter: brightness(100%);
		filter: opacity(100%);
		filter: saturate(2);
	}

	/**** Transitions ****/

	.masonry,
	.masonry li {
	  /* apply before masonry add class */
	  position: absolute;
	  /* important to add it before enter animation start */
	  -webkit-transition-duration: .7s;
	  transition-duration: .7s;
	  -webkit-transition-property: all;
	  transition-property: all;
	}

	.masonry .masonry-enter {
	  /* limit animated properties for entering elements */
	  -webkit-transition-property: -webkit-transform, opacity;
	  transition-property: transform, opacity;
	}

	.masonry-enter,
	.masonry-leave.masonry-leave-active {
	  opacity: 0;
	  -webkit-transform: scale(0.1);
	  transform: scale(0.1);
	}

	.masonry-leave,
	.masonry-enter.masonry-enter-active {
	  opacity: 1;
	  -webkit-transform: scale(1);
	  transform: scale(1);
	}

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

	.button {
	  display: inline-block;
	  padding: 0.5em 1.0em;
	  margin-bottom: 10px;
	  background: #EEE;
	  border: none;
	  border-radius: 7px;
	  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
	  color: #222;
	  font-family: sans-serif;
	  font-size: 16px;
	  font-weight: bold;
	  cursor: pointer;
	}

	.button2 {
	  display: inline-block;
	  padding: 0.5em 1.0em;
	  margin-bottom: 10px;
	  background: #EEE;
	  border: none;
	  border-radius: 7px;
	  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
	  color: #222;
	  font-family: sans-serif;
	  font-size: 10px;
	  font-weight: bold;
	  cursor: pointer;
	}

	.button:hover, .button2:hover {
	  background-color: #8CF;
	  color: #222;
	}

	.button:active,
	.button.is-checked,
	.button2:active,
	.button2.is-checked {
	  background-color: #28F;
	}

	.button.is-checked, .button2.is-checked {
	  color: white;
	}

	.button:active, .button2:active {
	  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
	}

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

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

	.button-group .button {
	  float: right;
	  border-radius: 3;
	  margin-left: 0;
	  margin-right: 1px;
	}

	.button-group .button:last-child { border-radius: 0.5em 0 0 0.5em; }
	.button-group .button:first-child { border-radius: 0 0.5em 0.5em 0; }
	.button-group .button:only-child { border-radius: 0.5em 0.5em 0.5em 0.5em; }

	.row {
	  display: flex; /* equal height of the children */
	}

	.col {
	  padding: 5px;
	  border: none;
	}