.accordion {
width: 100%;
max-width: 600px;
margin: 0 auto;
} .accordion-hidden{
display: none;
} .accordion-open {
display: block;
padding: 30px 70px 30px 100px;
background: #fce4d6;
cursor: pointer;
margin: 20px 0;
font-weight: 700;
color: #1a1a1a;
font-size: 1.5em;
position: relative; } .accordion-open::before,
.accordion-open::after {
content: '';
width: 20px;
height: 3px;
background: #000;
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
} .accordion-open::after {
transform: translateY(-50%) rotate(90deg);
transition: .5s;
}
.accordion-open span {
font-family: 'Roboto', sans-serif!important;
display: flex;
justify-content: center;
align-items: center;
width: 75px;
height: 100%;
background: #e8383d;
position: absolute;
text-align: center;
left: 0;
top: 0;
font-size: 1.7em;
color: #fff;
}
.accordion-close span {
font-family: 'Roboto', sans-serif!important;
display: flex;
justify-content: center;
align-items: center;
width: 75px;
height: 100%;
background: #fbdac8;
position: absolute;
text-align: center;
left: 0;
top: 0;
font-size: 1.7em;
color: #1a1a1a;
}
.accordion-close h3 {
color: #e8383d;
}
.accordion-close p {
text-align: justify; text-justify: inter-ideograph; text-justify: inter-character; }
.accordion-close h3:before {
font-family: "Font Awesome 6 Free";
content: '\f138';
font-weight: 900;
margin-right: 3px;
} .accordion-hidden:checked + .accordion-open:after {
transform: translateY(-50%) rotate(0);
} .accordion-close {
display: block;
height: 0; overflow: hidden; padding: 0 0 0 60px;
opacity: 0;
transition: 0.5s; position: relative;
} .accordion-hidden:checked + .accordion-open + .accordion-close {
height: auto;
opacity: 1;
padding: 30px 40px 30px 100px;
background: #fff9f5;
font-weight: 700;
font-size: 1.0em;
}
@media screen and (max-width: 325px) {
.accordion-open {
padding: 30px 40px 30px 90px;
}
}