@import "bourbon";

* {@include box-sizing(border-box);}



h3 {
  margin: 0;
     font-size: 15px;
  line-height: 1.2;
  color: green;
  cursor: pointer;
}

label {
  display: block;
  overflow: hidden;
}

.content p {
    color: #000;
    font-weight: 100;
    font-size: 13px;
}
.title {
  padding: 1em 3em;
  position: relative;
  z-index: 599;
  background: #fbfbfb;
  border-bottom: 1px solid #eee;
  @include transition(all .3s linear);
  &:hover {
    cursor: pointer;
    background: #f5f5f5;
  }
}

.content {
  position: relative;
  padding: 0;
  max-height: 0px;
  border-bottom: 1px solid #eee;
  @include transition(max-height .3s linear);
  
  p {
    position: relative;
    padding: 1.2em 3em;
    margin: 0;
    @include transform(scale(0));
    opacity: 0;
    @include transition(all .55s ease);
  }
}

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



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

input[type="checkbox"]:checked + .title + .content p {
  @include transform(scale(1));
  opacity: 1;
}