.acordeon {
  width: 100%;
  height: auto;
  margin-top:20px;
}

details {
  border-color: #878d99;
  color: rgba(255, 255, 255, 0.9);
  background: #fff;
  border: 1px solid;
  cursor: pointer;
  transition: background 0.3s;
  border-radius: 4px;
  min-height: 48px;
  max-height: 60px;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: rotate(0.1deg);
          transform: rotate(0.1deg);
  transition: all 0.3s;
  color:#000;
}
details:hover {
  border-color: #878d99;
  color: rgba(0, 157, 224, 1);
}
details:active {
  color: rgba(255, 255, 255, 0.9);
  border-color: #6d7380;
}
details ::-webkit-details-marker {
  display: none;
}
details + details {
  margin-top: 10px;
}
details p {
  color: #000;
  line-height: 1.7;
  margin: 10px 0 0;
  padding: 0 20px 5px;
  letter-spacing:0px;
  line-height: 100%;
}
details.primary {
  border-color: #409eff;
  color: rgba(255, 255, 255, 0.9);
  background: #409eff;
}
details.primary:hover {
  border-color: #409eff;
  color: rgba(255, 255, 255, 0.6);
}
details.primary:active {
  color: rgba(255, 255, 255, 0.9);
  border-color: #0d84ff;
}
details.success {
  border-color: #67c23a;
  color: rgba(255, 255, 255, 0.9);
  background: #67c23a;
}
details.success:hover {
  border-color: #67c23a;
  color: rgba(255, 255, 255, 0.6);
}
details.success:active {
  color: rgba(255, 255, 255, 0.9);
  border-color: #529b2e;
}
details.square {
  border-radius: 0;
}
details[open] {
  transition: all 0.6s;
  min-height: 100px;
  max-height: 100%;
  padding-bottom: 20px;
}

summary {
  outline: none;
  font-size: 2rem;
  padding: 13px;
}
summary:selection {
  background: transparent;
}
summary .close {
  display: none;
}
[open] summary .close {
  display: inline;
}
summary .open {
  display: inline;
}
[open] summary .open {
  display: none;
}
[open] summary {
  display: inline;
}
summary:after {
  margin-top: 2px;
  content: "➕";
  float: left;
  margin-right: 11px;
  text-align: center;
  font-size: 11px;
}
[open] summary:after {
  padding: 0 0 12px 0;
  content: "➖";
}