body {
  line-height: 1.5;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light";
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}


.container {
  max-width: 40em;
  position: relative;
  margin: 2em auto;
  border-right: 1px solid #eee;
  border-left: 1px solid #eee;
  box-shadow: rgba(#a5a5a5,.3) 0 0 77px;
}

label {
  display: block;
  overflow: hidden;
}

.title {
  padding: 1em 3em;
  position: relative;
  z-index: 599;
  background: #fbfbfb;
  border-bottom: 1px solid #eee;
  &:hover {
    cursor: pointer;
    background: #f5f5f5;
  }
}

.content {
  position: relative;
  padding: 0;
  max-height: 0px;
  border-bottom: 1px solid #eee;
  
  p {
    position: relative;
    padding: 1.2em 3em;
    margin: 0;
    opacity: 0;
  }
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + .title {
  background: #DBB8B5;
}

input[type="checkbox"]:checked + .title + .content {
  max-height: 555px;
}

input[type="checkbox"]:checked + .title + .content p {
  opacity: 1;
}