.details {
line-height: 1em; 
margin: 0 auto 0px;
}
.details__summary {
position: relative;
display: block;
cursor: pointer;
margin: 0;
padding: 6px 10px 6px 40px;
border-radius: 10px;
text-align: left;
color: hsla(111,13%,62%,1.00);
border: solid 1px hsla(111,13%,62%,1.00);
background-color: #fff;
font-size: 1em;
line-height: 1.5em;

}

.details__summary {
/*background-image: url("../img/dot4g.png");
background-position: 10px center; 
background-size: auto 16px;
background-repeat: no-repeat;
*/
}

.details__summary span.after { display: none; }
.details__summary::-webkit-details-marker { display: none; }

.details__summary::before {
display: inline-block;
content: "";
box-sizing: border-box;
position: absolute;
top: calc(50% - 10px);
left: 16px;
vertical-align: -.1em;
margin-right: .5em;
color: hsla(111,13%,62%,1.00);
line-height: 1;
width: 1em;
height: 1em;
border: 2px solid currentColor;
border-top: 0;
border-left: 0;
transition: all 0.4s ease-out;
transform: translateX(-25%) rotate(45deg);
}

.details[open] .details__summary {
border-radius: 10px 10px 0px 0px;
border-bottom-width: 0 ;
}

.details[open] .details__summary span.before { display: none; }
.details[open] .details__summary span.after { display: block; padding-left: 6px }

.details[open] .details__summary::before {
transform: rotate(-135deg);
top: calc(50% - 4px);
opacity: 1;
}
.details__content {
overflow: hidden;
padding: 16px 20px;
text-align: justify;
line-height: 2em;
border-radius: 0px 0px 10px 10px;
border: 1px solid hsla(111,13%,62%,1.00);
border-width: 0 1px 1px 1px;
background-color: #fff;
}
.details__content > * {
margin: 0;
padding-top: 0;
}
.details__content > *:last-child {
padding-bottom: 0;
}

.details__content .spc { font-size: .8em; line-height: 1.8em }

@media screen and (max-width: 1200px) { 


.bgblk .details__summary { background-color: #333; color: #fff; border-color: hsla(111,13%,62%,.7); }
.bgblk .details__content { background-color: #333; border-color: hsla(111,13%,62%,.7); }








}