details {
    position: relative;
    margin-bottom: .5rem;
    min-height: 1rem;
    max-height: 3rem;
    transition: min-height .15s linear, max-height .5s linear;
    -webkit-transition: min-height .15s linear, max-height .5s linear;
    will-change: max-height;
    overflow: hidden; }
details summary {
    display: inline-block;
    padding-left: 1.5em;
    cursor: pointer;
    outline: 0;
    transition: color .12s;
    -webkit-transition: color .12s; }
details summary::-webkit-details-marker {
    display: none; }
details summary::-moz-list-bullet {
    list-style-type: none; }
details summary span {
    border-bottom: 1px currentColor dotted; }
details summary::before {
    content: "";
    left: 0;
    top: .4em;
    position: absolute;
    background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50%/1em 1em;
    width: 1em;
    height: 1em;
    transition: transform .1s linear;
    -webkit-transition: transform .1s linear; }
details summary:hover {
    color: #d06c6c; }
details summary ~ * {
    padding-left: 1.5em;
    opacity: 0;
    transition: opacity .15s linear;
    -webkit-transition: opacity .15s linear; }
details[open] {
    min-height: 2em;
    max-height: 2000em;
    margin-bottom: 40px; }
details[open] summary {
    color: #d06c6c; }
details[open] summary ~ * {
    opacity: 1; }
details[open] summary:before {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg); }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    details {
        max-height: none; }
    details summary ~ * {
        max-height: 0;
        overflow: hidden;
        position: absolute; }
    details summary:focus {
        color: #d06c6c; }
    details summary:focus::before {
        transform: rotate(90deg);
        -ms-transform: rotate(90deg); }
    details summary:focus ~ * {
        max-height: 20em;
        position: static;
        opacity: 1; } }

@supports (-ms-ime-align: auto) {
    details {
        max-height: none; }
    details summary ~ * {
        max-height: 0;
        overflow: hidden;
        position: absolute; }
    details summary:focus {
        color: #d06c6c; }
    details summary:focus::before {
        transform: rotate(90deg);
        -ms-transform: rotate(90deg); }
    details summary:focus ~ * {
        max-height: 20em;
        position: static;
        opacity: 1; } }

p img {
    float: left;
    width: 3.25rem;
    margin: .25rem .5rem .25rem 0;
    opacity: .75; }