html, body { height: 100%; }

body { position: relative; }

img {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  font-family: 'helvetive neue', sans-serif;
  font-weight: 700;
}


.thumbnails {
  list-style: none;
  font-size: 0;
  margin-left: -10%;
}

.thumbnails li {
  display: inline-block;
  width: 23%;
  margin-left: 10%;
  text-align: center;
  vertical-align: middle;
}

.thumbnails li:hover .item-hugger { background: white; }

.thumbnails li:hover .item-hugger .title { color: #000; }

.thumbnails input[name="select"] { display: none; }

.thumbnails .item-hugger {
  position: relative;
  height: 100px;
  margin: 0;
  background: #fff;
  transition: all 150ms ease-in-out;
}

.thumbnails label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
}


.thumbnails .thumb-image {
  height: 100px;
  padding: 10px 0;
}

.thumbnails .content-lb {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 400px;
  height: calc(50vh);
  max-height:300px;
  padding: 20px 90px 50px 0px;
  margin:0 50px;
  opacity: 0;
  transition: all 150ms linear;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.thumbnails input[name="select"]:checked + .item-hugger {
  height: 100px;
  margin: 0;
  border: 1px solid #e8e8e8;
}

.thumbnails input[name="select"]:checked ~ .content-lb { opacity: 1; }


@media only screen and (max-width: 500px) {
	.thumbnails {
  list-style: none;
  font-size: 0;
  margin-left: -2%;
}

.thumbnails li {
  display: inline-block;
  width: 31%;
  margin-left: 2%;
  text-align: center;
  vertical-align: middle;
}
.thumbnails .content-lb {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(75vw);
  height: 250px;
  padding: 0 0 300px;
  opacity: 0;
  transition: all 150ms linear;
  display: flex;
  flex-direction: column;
  justify-content: center;
}	
}