.desplegable{ }
.desplegable .titulo { position: relative;
margin-bottom: 0;
border-bottom: 2px solid var(--e-global-color-dc4b473) ;
padding: 0.75em 0.5em;
margin-left: 0em;
padding-right: 2em;
background-color: #fff;
}
.single .desplegable .titulo h2,
.single .desplegable .titulo h3 {
font-size: 18px !important;
font-weight: 700;
margin: 0;
margin-left: -0.5em;
}
.desplegable .titulo h2, .desplegable .titulo h3, .desplegable .titulo h4{
margin-bottom: 0 !important;
margin-top: 0 !important;
margin-left: 1.5em;
margin-left: 0;
margin-right: 1em;
}
.desplegable .titulo .fa,
.desplegable .titulo .far {
position: absolute;
right: 16px;
top: 24px;
transform: translateY(-50%);
transition: all .3s ease-out;
font-weight: bold !important;
font-size: 20px !important;
color: var(--e-global-color-primary);
}
.desplegable .titulo:hover h2,
.desplegable .titulo:hover h3,
.desplegable .titulo:hover .fa{
color: var(--e-global-color-secondary) !important;
cursor: pointer;
}
.desplegable .titulo .title-icon {
position: absolute;
left: 16px;
color: #ccc;
font-size: 20px;
margin-top: -1px;
top: 50%;
transform: translateY(-50%);
display: none;
}
.desplegable .contenido { padding-top: 0.9em;
padding-left: 20px;
}
.desplegable.desplegado .titulo .fa-caret-down, .desplegable.desplegado .titulo .fa-angle-down{
transform: translateY(-50%) rotateX(180deg);
}
.desplegable.desplegado .contenido{
display: block;
}
.desplegable:last-child {
margin-bottom: 2em;
}
@media(max-width: 767px)
{
.single .desplegable .titulo h2 {
margin-left: -0.5em;
}
.single .desplegable .titulo {
padding-left: 0.5em;
}
.desplegable .titulo .fa,
.desplegable .titulo .far {
right: 0;
}
.desplegable .contenido { padding-top: 0.9em;
padding-left: 0px;
}
}