.expandable {
  transition: all 250ms ease-in-out;
}

.expandable .expand-bar {
  position: absolute;
  z-index: 10;
  display: block;
  width: 100%;
  left: 0px;
  bottom: 0px;
  background-color: white;
  cursor: pointer;
  text-decoration: none;
  color: #aa7c47;
  font-weight: bold;
  font-size: 12px;
  line-height: 16px;
}

.more,
.less {
  display: inline-flex;
  border-bottom: 1px dashed;
}

.expandable .expand-bar::before {
  position: absolute;
  width: 100%;
  height: 20px;
  top: -20px;
  left: 0px;
  display: block;
  content: "";
  background: rgba(237, 237, 237, 0);
  background: -moz-linear-gradient(top, rgba(237, 237, 237, 0) 0%, rgba(255, 255, 255, 0.8) 41%, rgba(255, 255, 255, 1) 70%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(237, 237, 237, 0)), color-stop(41%, rgba(255, 255, 255, 0.8)), color-stop(70%, rgba(255, 255, 255, 1)));
  background: -webkit-linear-gradient(top, rgba(237, 237, 237, 0) 0%, rgba(255, 255, 255, 0.8) 41%, rgba(255, 255, 255, 1) 70%);
  background: -o-linear-gradient(top, rgba(237, 237, 237, 0) 0%, rgba(255, 255, 255, 0.8) 41%, rgba(255, 255, 255, 1) 70%);
  background: -ms-linear-gradient(top, rgba(237, 237, 237, 0) 0%, rgba(255, 255, 255, 0.8) 41%, rgba(255, 255, 255, 1) 70%);
  background: linear-gradient(to bottom, rgba(237, 237, 237, 0) 0%, rgba(255, 255, 255, 0.8) 41%, rgba(255, 255, 255, 1) 70%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff', GradientType=0 );
}

.expandable .expand-bar i {
  display: none;
}

.expandable.expanded .expand-bar i {
  transform: rotate(90deg);
}

.expandable .expand-bar i::before,
.expandable .expand-bar i::after {
  position: absolute;
  width: 10px;
  height: 1px;
  background: #1d1d1d;
  content: "";
  left: 5px;
}

.expandable .expand-bar i::before {
  transform: rotate(45deg);
  top: 13px;
}

.expandable .expand-bar i::after {
  transform: rotate(-45deg);
  top: 6px;
}