h2 {
  margin: 20px auto 80px;
  font-size: 38px;
  font-weight: 300;
  text-align: center;
  letter-spacing: 2px;
  line-height: 1.5;
}

details {
  width: 100%;
  min-height: 5px;
  max-width: 700px;
  background-color:#fff;
  padding: 15px 10px 10px 15px;
  margin: 0 auto;
  position: relative;
  font-size: 22px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 5px;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

details + details {
  margin-top: 20px;
}

details[open] {
  min-height: 50px;
  background-color: #fdfdfd;
  box-shadow: 2px 2px 20px rgba(0,0,0,.2);
}

details p {
  color: #000;
  font-weight: 400;
}

summary {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  font-weight: 500;
  cursor: pointer;
}

summary:focus {
  outline: none;
  
}

summary:focus::after {
  content: "";
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

summary::-webkit-details-marker {
  display: none
}

.control-icon {
  fill: rebeccapurple;
  -webkit-transition: .3s ease;
  transition: .3s ease;
  pointer-events: none;
}

.control-icon-close {
  display: none;
}

details[open] .control-icon-close {
  display: initial;
  -webkit-transition: .3s ease;
  transition: .3s ease;
}

details[open] .control-icon-expand {
  display: none;
}



//---------------------------------
checkbox{display:none;}
.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
  position:absolute;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  position:inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Read more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Read less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0px 20px;
  color: #fff;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ED5274;
  background-color: #ED5274;
  border-radius: .25em;
}

.read-more-state-1 {
  display: none;
}

.read-more-target-1 {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
  position:absolute;
}

.read-more-state-1:checked ~ .read-more-wrap-1 .read-more-target-1 {
  opacity: 1;
  font-size: inherit;
  position:inherit;
  max-height: 999em;
}

.read-more-state-1 ~ .read-more-trigger-1:before {
  content: 'Show more';
}

.read-more-state-1:checked ~ .read-more-trigger-1:before {
  content: 'Show less';
}

.read-more-trigger-1 {
  cursor: pointer;
  display: inline-block;
  padding: 0px 20px;
  color: #fff;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #008009;
  background:#008009;
  border-radius: .25em;
  display: none;
}