* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

ul {
  list-style-type: square;
}

ul a {
  display: block;
  transition: background .3s;
}

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

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

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

label {
  /*background: rgba(228,227,223,0);*/
  display: block;
  width: 100%;
  height: 50px;
  cursor: pointer;
  position: absolute;
  top: 0;
  transition: top .45s cubic-bezier(.44, .99, .48, 1);
  margin-left: -10px;
  margin-top: 15px;
  margin-right: -10px;
}

/* * use the rule below for testing purposes * label:hover { *    background: yellow; *  } */

label:before, label:after {
  position: absolute;
  color: #14508f;
}

label:before {
  content: 'More';
  left: 25px;
  top: 12px;
}

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

input[type="checkbox"] ~ ul {
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s cubic-bezier(.44, .99, .48, 1);
}

/* CHECKED STATE STYLES–––––––––––––––––––––––––––––––––––––––––––––––––– */

[type="checkbox"]:checked ~ ul {
  max-height: none;
}

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

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

label:hover:before, label:hover:after {
  text-decoration: underline;
}

li::marker {
  font-size: small;
  color: grey;
}