@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans);
@font-face {
  font-family: 'chinese_rocksregular';
  src: url('../css/font/chinese_rocks_rg-webfont.woff2') format('woff2'),
       url('../css/font/chinese_rocks_rg-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  

}

@font-face {
  font-family: 'texas_tango_bold_personal_uRg';
  src: url('../css/font/texat_bold-webfont.woff2') format('woff2'),
       url('texat_bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

.faq *, *::before, *::after {
  box-sizing: border-box;
}

.faq body {
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 20px;
  background: radial-gradient(#09090909, #000000);
  color: rgba(255, 255, 255, .8);
  font: 1.5em/1.3 'texas_tango_bold_personal_uRg', sans-serif;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
  counter-reset: part;
}

hr {
  height: 100%;
  margin: 20px 0 0;
  padding-top:-5px;
  padding-bottom: 4px;
  border: none;
  border-bottom: solid 1px rgba(255, 255, 255, .2);
  font-family: 'texas_tango_bold_personal_uRg', serif;
  text-align: center;
  counter-increment: part;
  transition: border-bottom-color .2s ease-out;
}

hr::before {
  content: attr(data-content);
  display: block;
  color: #d8d2bc;
  font-family: 'texas_tango_bold_personal_uRg', serif;
  font-size: 1.1em;
  font-variant: small-caps;
  letter-spacing: .05em;
}

hr:hover, hr:focus {
  border-bottom-color: rgba(255, 255, 255, .8);
  outline: none;
}

hr:not(:focus) {
  cursor: pointer;
}

.faq p {
  text-align: justify;
  overflow: hidden;
}

hr:focus ~ p {
  height: auto;
  margin: 0;
  padding: 10px 20px;
  background-color: rgba(191,76,69, 0.25);
  opacity: 1;
  transform: translateY(0);
}

hr ~ p, hr:focus ~ hr ~ p {
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(-10px);
}