#jump {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background: rgba(228,0,16,1);

}
#jump ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#jump ul li {
  display: block;
  float: left;
}
#jump ul li a {
  display: block;
  padding: 5px;

  color: #FFF;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: bold;
}
#jump ul li:first-child a {

}
#jump ul li:last-child a {

}

/**
 * Note: I have omitted any vendor-prefixes for clarity.
 * Adding them is left as an exercise for the reader.
 */
.headroom {
    transition: transform 200ms linear;
}
.headroom--pinned {
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -o-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}
.headroom--unpinned {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}



.main {
  padding-top: 4em;
}
.main ul li {
  min-height: 420px;
}
.main li .img {

}
.main li img {
  width: 100%;
  height: auto;
  -webkit-box-shadow: 0 0 3px 2px rgba(0,0,0,.1);
  box-shadow: 0 0 3px 2px rgba(0,0,0,.1);
  margin-bottom: 20px;
}



@media only screen and (max-width: 40em) {
  .main ul li {
    min-height: 0px;
  }
  .main .img {
    float: left;
    width: 120px;
    height: 120px;
    padding: 20px;
  }
  .main .img img {
    width: 120px;

  }
  .main .vinylDetails {
    font-size: 1.2em;
    padding-top: 12px;
  }

  .main ul li:nth-child(odd) {
    background: #FAFAFA;
  }
}