/* (A) TABS CONTAINER */
.tab {
  position: relative;
  margin-left: 15px; margin-right: 15px;
  max-width: 100%;
  padding: 0px;
  background: rgba(150, 150, 150, 0.05);
}

.tab content{
  background: white;
}

/* (B) HIDE CHECKBOX */
.tab input { display: none; }

/* (C) TAB LABEL */
.tab label {
  display: block;
  margin-top: 15px;
  padding: 0px;
  color: #b07540;
  font-size: larger;
  line-height: 2.4em;
  font-weight: 600;
  cursor: pointer;
}

.tab label p {
  color: #b07540;
  font-size: larger;
  line-height: 2.4em;
  font-weight: 600;
  padding-left: 15px;
}

/* (D) TAB CONTENT */
.tab .tab-content {
  background: rgba(150, 150, 150, 0.0);
  /* CSS ANIMATION WILL NOT WORK WITH AUTO HEIGHT */
  /* THIS IS WHY WE USE MAX-HEIGHT INSTEAD */
  overflow: hidden;
  transition: max-height 0.3s;
  max-height: 0;
}
.tab .tab-content p { padding: 10px 0 10px 15px; }

/* (E) OPEN TAB ON CHECKED */
.tab input:checked ~ .tab-content { max-height: 100%; }

/* (F) EXTRA - ADD ARROW INDICATOR */
.tab label::after {
  content: "\00BB";
  position: absolute;
  font-size: larger;
  font-weight: bold;
  right: 15px;
  top: 0px;
  display: block;
  transition: all 0.4s;
}
.tab input:checked ~ label::after { transform: rotate(90deg); }