img {
  position: relative;
  z-index: -1;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.image-grid-front {
  width: 100%;
  max-width: 890px;
  margin: 0 auto;
  padding: 180px 0px 0px 0px;
  overflow: visible;
}

.image-grid-back {
  width: 100%;
  max-width: 890px;
  margin: 0 auto;
  padding: 220px 0px 0px 0px;
  overflow: visible;
}

.image__cell {
  float: left;
  position: relative;
}

.image--basic {
 margin: 0 5px;
position: relative;
display: inline-block;
}

.title {
width: 100%;
position: absolute;
bottom: 10px;
background-color: rgba(0,0,0,0.5);
}

.basic__img {
  display: block;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
}

.image__cell.is-collapsed .image--basic {
  cursor: pointer;
}

@media only screen and (min-width: 1540px) {
  .image__cell.is-expanded .image--expand {
  max-height: 900px;
  margin-bottom: 10px;
  width: 650%;
  margin-left: -75%;
  overflow: visible;
  }
  .image__cell {
      width: 20%;
  }
  
   .book--large {
	max-width: 400px;
}

  .side--info {
   width: 60%;
   padding-top: 40px;
  }

.image--large {margin: 40px;}
.book--large {margin: 40px 45px 40px 8px;}
.inner--cell {padding-bottom: 40px;}
.book--info {padding-top: 40px;}
  
  .image__cell:nth-of-type(5n+2) .image--expand {
	margin-left: -175%;
  }

  .image__cell:nth-of-type(5n+3) .image--expand {
	margin-left: -275%;
  }

  .image__cell:nth-of-type(5n+4) .image--expand {
	margin-left: -375%;
  }
  
  .image__cell:nth-of-type(5n+5) .image--expand {
	margin-left: -475%;
  }

  .image__cell:nth-of-type(5n+6) {
    clear: left;
  }
  
  .image--expand {
    width: 50%;
  }
}

@media only screen and (max-width: 1541px) {
  .image__cell.is-expanded .image--expand {
  max-height: 900px;
  margin-bottom: 10px;
  width: 500%;
  margin-left: 0%;
  overflow: visible;
  }

   .book--large {
	max-width: 270px;
  }
  
  .side--info {
	width: 55%;
	padding-top: 30px;
  }
  
.image--large {margin: 30px;}
.book--large {margin: 30px 40px 30px 8px;}
.inner--cell {padding-bottom: 30px;}
.book--info {padding-top: 30px;}

  .image__cell {
      width: 20%;
  }
  .image__cell:nth-of-type(5n+2) .image--expand {
/*     margin-left: -100%; */
	margin-left: -100%;
  }

  .image__cell:nth-of-type(5n+3) .image--expand {
/*     margin-left: -200%; */
	margin-left: -200%;
  }

  .image__cell:nth-of-type(5n+4) .image--expand {
/*     margin-left: -300%; */
	margin-left: -300%;
  }
  
  .image__cell:nth-of-type(5n+5) .image--expand {
/*     margin-left: -400%; */
	margin-left: -400%;
  }

  .image__cell:nth-of-type(5n+6) {
    clear: left;
  }
  
  .image--expand {
    width: 50%;
  }
}


.image--expand {
  position: relative;
  left: -5px;
  padding: 0 5px;
  box-sizing: content-box;
  overflow: hidden;
  background: #ffffff;
  max-height: 0;
  transition: max-height .3s ease-in-out,margin-bottom .1s .2s;
width: 100%;
}

.image__cell.is-collapsed .arrow--up {
  height: 10px;
  width: 100%;
}

.image__cell.is-expanded .arrow--up {
  border-bottom: 8px solid #444444;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  height: 0;
  width: 0;
  margin: 2px auto 0;
  margin-top: 12px;
  margin-bottom: -10px;
}

.expand__close {
  position: absolute;
  top: 25px;
  right: 20px;
  color: #888888;
  font-size: 50px;
  line-height: 50px;
  text-decoration: none;
  }

.expand__close:before {
  content: '×';
}

.expand__close:hover {
  color: #aaaaaa;
}

.image--large {
  float: left; 
  max-width: 100%;
  height: auto;
  display: inline-block;
  /* margin: 30px; */
  box-sizing: border-box;
  border: 1px solid #dddddd;
}

.back--large {
  margin: 40px 45px 40px 8px;
  float: left; 
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid #dddddd;
  max-width: 305px;
}

.book--large {
  float: left; 
  display: inline-block;
  /* margin: 30px 40px 30px 8px; */
  box-sizing: border-box;
  border: 1px solid #dddddd;
}

.inner--cell {
    float: left;
	height: 100%;
	border-top: 1px solid #888888;
	border-bottom: 1px solid #888888;
overflow: visible;
width: 100%;
margin: 5px 0 20px 0;
/* padding-bottom: 30px; */
	}

.book--info {
    font-family: Frutiger;
	font-size: 13px;
	line-height: 19px;
	color: #444444;
    display: inline-block;
/* 	padding-top: 30px; */
	vertical-align: top;
}

.side--info {
    font-family: Frutiger;
	font-size: 13px;
	line-height: 19px;
	color: #444444;
    display: inline-block;
/* 	padding-top: 30px; */
	vertical-align: top;
}

.book-select {
     font-family: Frutiger;
	 font-size: 13px;
	 height: 22px;
	 width: 200px;
	 padding: 0 0 0 2px;
	 color: #444444;
	 outline: 0;
	 border: 1px solid #dddddd;
}

.set-select {
     font-family: Frutiger;
	 font-size: 13px;
	 height: 22px;
	 width: 240px;
	 margin-bottom: 20px;
	 color: #444444;
	 outline: 0;
	 border: 1px solid #dddddd;
	 float: right;
}

.cart-add {
     width: 90px;
	 font-family: Frutiger;
	 font-size: 13px;
	 height: 20px;
	 outline: 0;
	 border: 1px solid #dddddd;
	 background-color: #ffffff;
	 color: #444444; 
	 font-weight: normal;
	 margin: 0 0 0 10px;
}

.cart-out {
     width: 90px;
	 font-family: Frutiger;
	 font-size: 13px;
	 color: #888888;
	 height: 20px;
	 outline: 0;
	 border: 1px solid #dddddd;
	 background-color: #ffffff;
	 margin: 0 0 0 10px;
}

.cart-view {
     width: 90px;
	 font-family: Frutiger;
	 font-size: 13px;
	 height: 20px;
	 outline: 0;
	 border: 1px solid #dddddd;
	 background-color: #ffffff;
 	 color: #444444; 
	 font-weight: normal;
     margin: 0 0 0 10px;
}

.placement {
     position: absolute;
     bottom: 10px;
     height: 170px;
	 width: 100%;
}

.placementback {
	position: absolute;
	bottom: 10px;
	height: 200px;
	width: 100%;
}

.holder {
	position: absolute;
	top: 0px;
	height: 180px;
	width: 100%;
}

.nav {
	width: 878px;
	margin: 0 auto;
	margin-bottom: 15px;
	margin-top: 36px;
}