.portlet-profile .showmore {
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); }

.portlet-profile .showmore-state {
  display: none; }

.portlet-profile .showmore-trigger {
  cursor: pointer;
  box-shadow: 0 0 50px 40px #fff;
  background: #fff;
  width: 100%;
  color: #e8564f;
  transition: all 0.3s ease-in-out;
  font-family: "fontawesome-alloy", "IRANYekan";
  font-weight: 500;
  position: relative;
  top: -10px; }

.portlet-profile .showmore-state:checked + .showmore {
  max-height: 2000em !important;
  transition: max-height 1s ease-in-out; }
  .portlet-profile .showmore-state:checked + .showmore + .showmore-trigger {
    box-shadow: none; }
    .portlet-profile .showmore-state:checked + .showmore + .showmore-trigger:after {
      content: attr(data-showless); }

.portlet-profile .showmore-state + .showmore + .showmore-trigger:before {
  content: "\f0dc";
  margin-right: 5px;
  position: relative;
  top: 1.5px; }

.portlet-profile .showmore-state + .showmore + .showmore-trigger:after {
  content: attr(data-showmore); }

.portlet-profile .panel {
  transition: all 0.2s ease-in-out; }
  .portlet-profile .panel .panelbox {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), margin-top 0.2s ease-in-out; }
  .portlet-profile .panel .panelhandle {
    margin: 0;
    cursor: pointer; }

.portlet-profile .panelstate:checked + .panel {
  background: #f7f7f7;
  margin-top: 5px;
  margin-bottom: 15px;
  padding-bottom: 15px; }
  .portlet-profile .panelstate:checked + .panel .panelbox {
    max-height: 999em;
    transition: max-height 1s ease-in-out, margin-top 0.2s ease-in-out;
    margin-top: 10px; }