summary, details { display: block; }

  details { visibility: hidden; }

  details > summary { visibility:  visible; }



  details[open] summary.no-det:before { transform: rotate(90deg); }

  details[open] { visibility: visible; }


  details summary, details {display: block;font-family: Calluna, Arial, sans-serif;background: #333;width: 100%;border-radius: .1em .1em 0 0;font-size: 1.5rem;margin: 0rem auto;color: #fff;}

  details summary { cursor: pointer; padding: 1em; padding-left: 3rem; margin-top: 0; /*border: solid 1px #ff0017;*/ }

  details {background: linear-gradient(#c5bebe,#dad8d8);border-radius: .1em;padding-top: 0;width: 100%;color: #000;}

  details summary::before { content:"►"; font-size: 1em; position: relative; left: -1em; transition: .3s linear; }

  details[open] summary::before { content:"▼"; font-size: 1em; position: relative; left: -1em; transition: .3s linear;  color: red; }

  summary:hover { cursor: pointer; }

  details[open]  { padding-bottom: 1rem; }

  details.no-details { max-height: 3em; overflow: hidden;  transition: 1s max-height ease-in-out; }

  details.no-details[open] { max-height: 20em; padding-bottom: 1em; }

  details a { display: block; }
  summary:focus {outline:#ff0017 solid 1px;}
  details summary::-webkit-details-marker { display:none; }