.del__questions {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 4rem;
}
.del__questions .del__s_header {
text-align: center;
font-size: var(--size-text-xxl);
font-weight: 300;
}
.del__questions .del__s_grid {
display: flex;
flex-flow: row wrap;
}
.del__questions .del__s_grid .ts__s_col {
flex: 0 0 50%;
}
.del__questions .del__s_grid .ts__s_item .del__s_inner {
margin: 1rem;
background-color: #F8FAFB;
padding: 2rem;
}
.del__questions .del__s_grid .ts__s_item .ts__s_top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
}
.del__questions .del__s_grid .ts__s_item .ts__s_top .del__s_text {
flex-grow: 1;
font-weight: 700;
font-size: 24px;
}
.del__questions .del__s_grid .ts__s_item .ts__s_top .ts__s_show {
display: flex;
justify-content: center;
align-items: center;
padding-left: 2rem;
}
.del__questions .del__s_grid .ts__s_item .ts__s_top .ts__s_show span {
background-color: var(--color-green);
padding: 0.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
font-size: 24px;
color: white;
cursor: pointer;
}
.del__questions .del__s_grid .ts__s_item.ts__s_open .ts__s_top .ts__s_show span {
background-color: lightgrey;
color: gray;
transform: rotateZ(45deg);
}
.del__questions .del__s_grid .ts__s_item.ts__s_open .ts__s_top .ts__s_show span:before,
.del__questions .del__s_grid .ts__s_item.ts__s_open .ts__s_top .ts__s_show span:after {
display: none;
}
.del__questions .del__s_grid .ts__s_item .ts__s_bottom .ts__s_text {
padding-top: 1rem;
color: #939393;
font-size: 16px;
height: 0px;
overflow: hidden;
transition: height 0.5s ease-in-out, padding 0.5s ease-in-out;
}
.del__questions .del__s_grid .ts__s_item.ts__s_open .ts__s_bottom .ts__s_text {
animation: expand 0.5s ease-in-out;
height: 100%;
}
@keyframes expand {
0% {
max-height: 0;
}
100% {
height: 100%;
max-height: 500px; }
}
.del__questions .ts__s_button {
display: flex;
justify-content: center;
align-items: center;
}
.del__questions .ts__s_button a {
padding: 2rem;
display: flex;
justify-content: center;
align-items: center;
font-size: var(--size-text-m-3);
background-color: var(--color-green);
color: white;
transition: all 0.3s ease-in-out;
border-radius: 1rem;
border: 1px solid var(--color-green);
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
}
.del__questions .ts__s_button a i {
padding-left: 0.5rem;
}
.del__questions .ts__s_button a:hover {
background: white;
border: 1px solid var(--color-green);
color: var(--color-green);
}
@media (max-width: 1280px) {
.del__questions {
display: flex;
padding-left: 1rem;
padding-right: 1rem;
}
}
@media (max-width: 960px) {
.del__questions {
display: flex;
padding-left: 1rem;
padding-right: 1rem;
margin-bottom: 2rem;
}
.del__questions .del__s_grid .ts__s_col {
flex: 0 0 100%;
}
.del__questions .del__s_grid .ts__s_item {
border-bottom: 1px solid lightgrey;
}
.del__questions .del__s_grid .ts__s_item .del__s_inner {
padding: 0;
}
}