@charset "utf-8";
/* CSS Document */

.read-more-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease;
}

.read-more-toggle {
  display: none;
}

.read-more-toggle-label {
  display: inline-block;
  user-select: none;
  cursor: pointer;
  border: none;
  padding: 5px;
  margin: .5em;
  font-size: 1em;
  background: #555;
  color: white;
}

.read-more-toggle-label:after {
  content: "More";
  display: inline-block;
}

.read-more-toggle:checked + .read-more-content {
  display: block;
  /* css animation won't work with "auto"; set to some height larger
	than the content */
  max-height: 1000px;
}

.read-more-toggle:checked + .read-more-content + .read-more-toggle-label:after {
  content: "Less";
}

article {
  border-bottom: 2px #2E2E2E;
background-color: #fff;
}

article p {
  margin: 0px;
}

/* usage:

<article>
  <p>...</p>
  <input id="read-more-toggle-1" class="read-more-toggle" type="checkbox">
  <div class="read-more-content">
   <p>...</p>
  </div>
  <label class="read-more-toggle-label" for="read-more-toggle-1">Read </label>
</article>

<article>
    <p>...</p>
  <input id="read-more-toggle-2" class="read-more-toggle" type="checkbox">
  <div class="read-more-content">
    <p>...</p>
  </div>
  <label class="read-more-toggle-label" for="read-more-toggle-2">Read </label>
</article>

<article>
   <p>...</p>
  <input id="read-more-toggle-3" class="read-more-toggle" type="checkbox">
  <div class="read-more-content">
    <p>...</p>
  </div>
  <label class="read-more-toggle-label" for="read-more-toggle-3">Read </label>
</article>