/*--------------------------------------------------------------------------*\
    Modal close
\*--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------*\
        Container
\*--------------------------------------------------------------------------*/

.modal__close{
    /*box*/
    position:absolute;
    top:10px;
    right:10px;
    display:block;
    height:40px;
    width:40px;

    /*border*/
    border-radius: 50%;

    /*transition*/
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

.modal__close:hover{
    /*background*/
    background-color: var(--c-cta-2);
}

/*--------------------------------------------------------------------------*\
        Cross
\*--------------------------------------------------------------------------*/

.modal__close::before{
    /*box*/
    position:absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    top:0px;
    left:0px;
    height:100%;
    width:100%;

    /*text*/
    font-family: var(--ff-title);
    content: 'X';
    color:var(--c-cta-2);
    font-size: var(--fs-xlg);

    /*transition*/
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.modal__close:hover::before{
    /*text*/
    color:var(--c-tertiary-4);
}