@media (min-width: 48em) {
  .collapsible-content {
	max-height: 100% !important;
  }
  .toggle+.checkmark {
	display: none;
  }
}

.collapsible-content {
	max-height: 0px;
	overflow: hidden;
	transition: max-height .25s ease-in-out;
}

.toggle:checked+.checkmark+.collapsible-content {
	max-height: 100%;
}

/* The checkbox-container */
.checkbox-container {
  position: relative;
  cursor: pointer;
  font-size: 22px;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
	font-family: ForkAwesome;
  content: "";
	justify-content: center;
	align-content: center;
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

/* On mouse-over, add an underline */
.checkbox-container:hover input ~ .checkmark,
.checkbox-container:focus input ~ .checkmark {
	text-decoration: underline;
	color: white;
}

/* When the checkbox is checked, rotate the symbol */
.checkbox-container input:checked ~ .checkmark {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

/* Create the checkmark/indicator */
.checkmark:after {
  content: "";