/* CHECKBOX CONTAINER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.container {
  position: relative;
  height: auto;
  border-top: 0;
}

[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

label {
  color: #fff;
  display: block;
  width: 100%;
  height: 40px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 50px;
  transition: top .45s cubic-bezier(.44, .99, .48, 1);
}
/*
 * use the rule below for testing purposes
 * label:hover {
 *    background: yellow;
 *  }
 */

label:before,
label:after {
  position: absolute;
}

label:before {
  content: 'read more';
  right: 50px;
}

label:after {
  content: '⇣●';
  right: 10px;
  -webkit-animation: sudo .85s linear infinite alternate;
  animation: sudo .85s linear infinite alternate;
}

@keyframes sudo {
  from {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  to {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
  }
}

input[type="checkbox"] ~ div {
  width: 100%;
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s cubic-bezier(.44, .99, .48, 1);
}
/* CHECKED STATE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[type="checkbox"]:checked ~ div {
  /**
   * the value of the `max-height` property specifies the transition speed
   * set a very big value (e.g. 9999px) to see the difference
   */
  
  max-height: 800px;
}

[type="checkbox"]:checked + label {
  top: 100%;
}

[type="checkbox"]:checked + label:before {
  content: 'show less';
}

[type="checkbox"]:checked + label:after {
  content: '⇡●';
}