/* CSS Document */

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  text-align:left;
  margin-left:-25px !important;
}

input[type="radio"]:checked ~ .reveal-if-active,
input[type="checkbox"]:checked ~ .reveal-if-active {
  opacity: 1;
  max-height: 300px; /* little bit of a magic number :( */
  overflow: visible;
}

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: scale(0.8);
  transition: 0.5s;
  input[type="radio"]:checked ~ &,
  input[type="checkbox"]:checked ~ & {
    opacity: 1;
    max-height: 300px;
    overflow: visible;
    padding: 10px 20px;
    transform: scale(1);
  }
}