/*======================================================================

UTILITY CLASSES
======================================================================*/


/*======================================================================
 DISPLAY
======================================================================*/

.ms-block{
    display:block;
}

.ms-inline{
    display:inline;
}

.ms-inline-block{
    display:inline-block;
}

.ms-flex{
    display:flex;
}

.ms-grid{
    display:grid;
}

.ms-hidden{
    display:none !important;
}



/*======================================================================
 FLEX UTILITIES
======================================================================*/

.ms-flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.ms-flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.ms-flex-column{

    display:flex;

    flex-direction:column;

    align-items:stretch;

}

.ms-flex-wrap{

    flex-wrap:wrap;

}

.ms-align-center{

    align-items:center;

}

.ms-justify-center{

    justify-content:center;

}

.ms-justify-between{

    justify-content:space-between;

}



/*======================================================================
 TEXT
======================================================================*/

.text-left{

    text-align:left;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.text-white{

    color:var(--ms-white);

}

.text-gold{

    color:var(--ms-gold);

}

.text-soft{

    color:var(--ms-text-soft);

}



/*======================================================================
 WIDTH
======================================================================*/

.w-25{

    width:25%;

}

.w-50{

    width:50%;

}

.w-75{

    width:75%;

}

.w-100{

    width:100%;

}



/*======================================================================
 AUTO MARGIN
======================================================================*/

.mx-auto{

    margin-left:auto;

    margin-right:auto;

}



/*======================================================================
 VISIBILITY
======================================================================*/

.hide-desktop{

    display:none;

}

@media (max-width:1024px){

    .hide-desktop{

        display:block;

    }

    .hide-tablet{

        display:none;

    }

}

@media (max-width:767px){

    .hide-mobile{

        display:none;

    }

}