@import url(//fonts.googleapis.com/css?family=Vast+Shadow);
.inductee {
  background-color: #faf8f5;
  position: relative;
  z-index: 1;
}

.chapter {
  position: relative;
  color: #000;
  padding: 2em 0 0;
}
.chapter a {
  color: #000;
  text-decoration: none;
}
.chapter p {
  font-size: 115%;
  line-height: 2em;
  margin: 2em 0;
  text-align: justify;
}
@media (max-width: 767px) {
  .chapter p {
    margin: 1em 0;
  }
}
.chapter .photoCaption {
  position: absolute;
  bottom: 10px;
  right: 10px;
  line-height: 1em;
  z-index: 2;
}
.chapter .sample-hr-top {
  border: none;
  width: 100%;
  height: 11px;
  background: url(../img/inductees/mm/dark-sample-above.jpg) repeat-x scroll center bottom #110d0d;
  margin: 0;
}
.chapter .sample-hr-bottom {
  border: none;
  width: 100%;
  height: 12px;
  background: url(../img/inductees/mm/dark-sample-below.jpg) repeat-x scroll center top #110d0d;
  margin: 0;
}
.chapter .alt-sample-hr-top {
  border: none;
  width: 100%;
  height: 12px;
  background: url(../img/inductees/mm/sample-edge.png) repeat-x scroll center top transparent;
  margin: 0;
}
.chapter .alt-sample-hr-bottom {
  border: none;
  width: 100%;
  height: 12px;
  background: url(../img/inductees/mm/sample-edge.png) repeat-x scroll center -12px transparent;
  margin: 0 0 4em;
}

#ch1 {
  background: url(../img/inductees/mm/texture-barnwood.jpg) repeat scroll center top #5c4b3f;
  position: relative;
}
#ch1 a {
  color: #fff;
}
#ch1 .logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 10em 0;
}
@media (max-width: 1024px) {
  #ch1 .logo {
    margin: 12em 0;
  }
}
@media (max-width: 800px) {
  #ch1 .logo {
    margin: 10em 0;
  }
}
@media (max-width: 767px) {
  #ch1 .logo {
    margin: 8em 0;
  }
}
@media (max-width: 640px) {
  #ch1 .logo {
    margin: 6em 0;
  }
}
@media (max-width: 480px) {
  #ch1 .logo {
    margin: 4em 0;
  }
}
#ch1 .cutout {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: auto;
  display: block;
}
@media (orientation: portrait) {
  #ch1 .cutout {
    width: auto;
  }
}
#ch1 .photoCaption {
  color: #fff;
  text-align: right;
}

#ch2 {
  padding: 0;
  background: url(../img/inductees/mm/texture-paper.jpg) repeat scroll center top #efeeec;
}
#ch2 .wrapper {
  background: url(../img/inductees/mm/texture-paper-2.jpg) repeat-x scroll center top transparent;
  padding: 12em 0 4em;
}
@media (min-width: 1401px) {
  #ch2 .wrapper {
    background-size: 100% auto;
  }
}
#ch2 .wrapper .queen {
  margin-bottom: 4em;
}
#ch2 .wrapper .queen img {
  display: block;
  margin: 0 auto;
}
#ch2 .wrapper .queen .text {
  margin: 10px auto;
}
#ch2 .wrapper h2 {
  text-align: center;
  font-size: 200%;
  line-height: 1.5em;
}
@media (max-width: 1024px) {
  #ch2 .wrapper {
    padding: 8em 0 6em;
  }
}
@media (max-width: 800px) {
  #ch2 .wrapper {
    padding: 7em 0 5em;
  }
}
@media (max-width: 767px) {
  #ch2 .wrapper {
    padding: 6em 0 4em;
  }
}
@media (max-width: 640px) {
  #ch2 .wrapper {
    padding: 5em 0 3em;
  }
}
@media (max-width: 480px) {
  #ch2 .wrapper {
    padding: 4em 0 2em;
  }
}

#ch3 {
  padding: 0;
  background: url(../img/inductees/mm/texture-wood.jpg) repeat scroll center top #6b2c20;
}
#ch3 .wrapper {
  background: url(../img/inductees/mm/texture-wood-top.jpg) repeat-x scroll center top transparent;
  position: relative;
}
#ch3 .chapter-heading {
  width: 100%;
  height: 135px;
  background: url(../img/inductees/mm/texture-wood-heading.jpg) no-repeat scroll center top transparent;
  overflow: hidden;
  line-height: 300px;
  margin: 0;
}
#ch3 .text {
  color: #fff;
  margin: 6em 0;
}
#ch3 .text a {
  color: #fff;
}
@media (max-width: 1024px) {
  #ch3 .text {
    margin: 2em 0;
  }
}
@media (max-width: 480px) {
  #ch3 .text {
    margin: 2em 0;
  }
}
#ch3 .photoCaption {
  color: #fff;
  opacity: 0.5;
}
#ch3 .photoCaption a {
  color: #fff;
}
#ch3 .sample {
  background: #110d0d;
  padding: 3.5em 0;
  margin: 0;
}
@media (max-width: 767px) {
  #ch3 .sample {
    padding: 1em;
  }
}
#ch3 .sample h2 {
  margin: 1em 0 1em;
  color: #fff;
}
#ch3 .sample p {
  margin: 0.25em 0 1em;
  color: #fff;
  line-height: 1.25em;
}
#ch3 .sample .button {
  margin-top: -0.5em;
  display: inline-block;
  padding: 5px 10px;
}
#ch3 .sample .art {
  float: left;
  width: 32%;
  text-align: center;
}
#ch3 .sample .art img {
  display: block;
  margin: 0 auto;
}
#ch3 .sample .player {
  float: right;
  width: 64%;
}
#ch3 .sample .jp-audio {
  margin-bottom: 1em;
}
@media (max-width: 767px) {
  #ch3 .sample .art,
  #ch3 .sample .player {
    float: none;
    width: auto;
  }
  #ch3 .sample .art .button {
    display: inline-block;
    margin: -2em 0 1em;
  }
  #ch3 .sample .art img {
    max-width: 90%;
  }
}
#ch3 .sample div.jp-audio > div {
  padding: 1em;
}
@media (max-width: 767px) {
  #ch3 .sample div.jp-audio > div {
    padding: 1em;
  }
}

#ch4 {
  padding: 0;
  background: url(../img/inductees/mm/texture-paper.jpg) repeat scroll center top #efeeec;
}
#ch4 .wrapper {
  background: url(../img/inductees/mm/bg-road.jpg) repeat-x scroll center bottom transparent;
  padding: 8em 0 900px;
}
@media (min-width: 1401px) {
  #ch4 .wrapper {
    background-size: 100% auto;
  }
}
@media (max-width: 1024px) {
  #ch4 .wrapper {
    padding: 6em 0 800px;
  }
}
@media (max-width: 800px) {
  #ch4 .wrapper {
    padding: 5em 0 750px;
  }
}
@media (max-width: 767px) {
  #ch4 .wrapper {
    padding: 4em 0 700px;
  }
}
@media (max-width: 640px) {
  #ch4 .wrapper {
    padding: 3em 0 650px;
  }
}
@media (max-width: 480px) {
  #ch4 .wrapper {
    padding: 2em 0 600px;
  }
}
#ch4 .songs {
  margin: 3em 0 4em;
  text-align: center;
  text-transform: uppercase;
  font-size: 150%;
  line-height: 225%;
}
@media (max-width: 768px) {
  #ch4 .songs {
    font-size: 115%;
  }
}
#ch4 .songs span {
  display: block;
}
#ch4 .songs strong {
  font-size: 200%;
  font-family: "Vast Shadow", Courier, serif;
  font-weight: normal;
}
@media (max-width: 768px) {
  #ch4 .songs strong {
    font-size: 150%;
  }
}
#ch4 .sample {
  background: #333;
  color: #fff;
  padding: 4em;
  margin-bottom: 0;
}
#ch4 .sample a {
  color: #fff;
}
@media (max-width: 1024px) {
  #ch4 .sample {
    padding: 2em;
  }
}
#ch4 .sample .text h2 {
  font-family: "Vast Shadow", Courier, serif;
  font-size: 200%;
  font-weight: normal;
  margin-bottom: 0.25em;
  margin-top: .5em;
}
@media (max-width: 1024px) {
  #ch4 .sample .text h2 {
    margin-top: 0;
    font-size: 150%;
    text-align: center;
  }
}
#ch4 .sample .text p {
  font-size: 90%;
  margin: 1em 0 1em;
}
#ch4 .sample .button {
  margin-top: -0.5em;
  display: inline-block;
  padding: 5px 10px;
}
#ch4 .sample .art {
  text-align: center;
}
#ch4 .sample .art img {
  display: block;
  margin: 0 auto;
}
#ch4 .sample .player h2 {
  margin-bottom: 0;
}
@media (max-width: 1024px) {
  #ch4 .sample .player h2 {
    text-align: center;
  }
}
#ch4 .sample .player p {
  font-size: 80%;
  margin: 0.5em 0;
}
@media (max-width: 1024px) {
  #ch4 .sample .player p {
    text-align: center;
  }
}
@media (max-width: 767px) {
  #ch4 .sample .art .button {
    display: inline-block;
    margin: -2em 0 1em;
  }
}
#ch4 .photoCaption {
  left: 10px;
  text-align: center;
  color: #fff;
  opacity: 0.4;
}
#ch4 .photoCaption a {
  color: #fff;
}

#ch5 {
  padding: 0;
  background: url(../img/inductees/mm/bg-chicago.jpg) no-repeat scroll 0px bottom black;
  color: #fff;
}
#ch5 .wrapper {
  padding: 0 0 20em;
  background: url(../img/inductees/mm/bg-chi-top.png) repeat-x scroll top center transparent;
}
@media (max-width: 1023px) {
  #ch5 .wrapper {
    padding: 0em 0 5em;
    background-color: rgba(0, 0, 0, 0.65);
  }
}
@media (max-width: 480px) {
  #ch5 .wrapper {
    padding: 0em 0 5em;
  }
}
@media (min-width: 1281px) {
  #ch5 {
    background-size: 50% auto;
    background-position: left bottom;
  }
}
@media (min-width: 1601px) {
  #ch5 {
    background-position: left top;
  }
}
@media (max-width: 1024px) {
  #ch5 {
    background-position: -25% bottom;
  }
}
@media (max-width: 768px) {
  #ch5 {
    background-position: center center;
    background-attachment: fixed;
  }
}
#ch5 a {
  color: #fff;
}
#ch5 h2 {
  font-weight: normal;
  font-size: 2.5em;
  line-height: 1.25em;
  text-align: center;
  text-shadow: 0px 0px 5px #ffdc78;
}
@media (max-width: 767px) {
  #ch5 h2 {
    font-size: 1.75em;
    text-align: left;
  }
}
#ch5 p {
  text-align: left;
}
#ch5 .photoCaption {
  color: #fff;
  opacity: 0.4;
}
#ch5 .photoCaption a {
  color: #fff;
}

#ch6 {
  background: url(../img/inductees/mm/texture-barnwood.jpg) repeat scroll center top #5c4b3f;
  padding: 12em 0;
}
@media (max-width: 768px) {
  #ch6 {
    padding: 0px;
  }
}
#ch6 .sheet {
  background: url(../img/inductees/mm/texture-paper.jpg) repeat scroll center top #efeeec;
  box-shadow: 0px 2px 40px rgba(0, 0, 0, 0.8);
  padding: 6em 8em;
}
@media (max-width: 768px) {
  #ch6 .sheet {
    padding: 2em 3em;
    position: relative;
    top: -40px;
  }
}
#ch6 .sheet p {
  text-align: left;
}
#ch6 .photoCaption {
  color: #fff;
  text-align: right;
  opacity: .7;
}
#ch6 .photoCaption a {
  color: #fff;
}

#ch7 {
  padding: 0;
  background: #fff;
}
#ch7 .text {
  background: url(../img/inductees/mm/bg-texture.jpg) no-repeat scroll center top white;
  padding: 6em 0;
}
@media (min-width: 1401px) {
  #ch7 .text {
    background-size: 100% auto;
  }
}
@media (min-width: 1701px) {
  #ch7 .text {
    background-position: center bottom;
  }
}
@media (max-width: 1024px) {
  #ch7 .text {
    padding: 3em 0;
  }
}
@media (max-width: 768px) {
  #ch7 .text {
    padding: 2em 0;
  }
}
#ch7 h2 {
  font-family: "Vast Shadow", Courier, serif;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  font-size: 3em;
  line-height: 125%;
}
@media (max-width: 768px) {
  #ch7 h2 {
    font-size: 2em;
  }
}
#ch7 .logo {
  display: block;
  position: static;
  margin: 0 auto;
}
#ch7 .outro-portrait {
  display: block;
  width: 100%;
  height: auto;
}
#ch7 .photoCaption {
  text-align: right;
}