/*COLAPSABLE*/
.colapsable{
    display:flex;
    flex-flow: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-color:#ffffff;
    padding:18px;
    margin:20px;
    box-shadow: 0px 12px 18px -10px rgba(0, 0, 0, 0.3);
    border-bottom: 3px solid var(--base-color);
}
.colapsable__cabecera{

    display:flex;
    flex-flow: row;
    width:100%;
    justify-content: space-between;
    
   
    

}
.colapsable__titulo{

    text-transform: uppercase;
    font-size: 18px;

}


.colapsable__contenido{
    transition: max-height 1.5s ease;
    overflow: hidden;
    max-height:0px;
    width:100%;
    
   
}


/*FIN COLAPSABLE*/


/* Estilamos la cruz*/
.colapsable__boton{

    /*display:none;*/
    border: 1px solid var(--base-color);
    height:20px;
    width:20px;
    border-radius:100%;
    

   

}
.colapsable__line{

    height: 2px;
    width: 10px;
    margin: 0.5rem 0.25rem;
    background: var(--base-color);
    transition: transform 1s ease, opacity 0.75s ease-in-out;

}
.colapsable__line--line2{

    transform: rotate(90deg) translateX(-10px) ;

}


/*Fin de estilos de la cruz*/                                                                                       

/*Estilos de Movil*/
@media screen and  (max-width:800px) {

}
/**Fin de Estilos de Movil/

/*NO BEM*/

/*Estilos click cross*/
.subcross1 {

    transform:rotate(45deg)translateX(0px  
    );

}
.subcross2 {

    transform:translateY(-10px) rotate(-45deg);

}


.subshow{

    max-height:500px;
    
   /* transform: translateX(+60%) translateY(68px);*/

}
/*Fin Estilos click crossa*/
/*Fin NO BEM*/