/***************
*
*   MODAL BOX
*
****************/

/*

GLOBAL CONTAINER & VEIL

*/

.u-modal {
    width: 100%;
    height: 100%;

    background-color:rgba(12,13,16,0.85);

    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;

    /* manages its visibility */
    opacity: 0;
    pointer-events: none;
    transition: all 150ms ease-in}


/* When it's visible */
.u-modal.is-visible {
    pointer-events: auto;
    opacity: 1}

    /*

    MAIN BOX (MODAL-BOX)

    */

    .u-modal-box {
        width: 96%;
        height: auto;
        max-height: 95%;
        overflow-y: auto;
        max-width: 800px;
        padding: 16px;

        color: #000;
        background-color: #fff;

        position: relative;
        top: 50%;
        left: 50%;
        z-index: 10;

                transform: translate(-50%, -55%);
                transition: transform 250ms 100ms linear}

    /* Pseudo */
    .u-modal-box:before,
    .u-modal-box:after{
        content: " ";
        display: table}
    .u-modal-box:after{
        clear: both}

    /* Change its original size to make it FULLSCREEN */
    .modal-box--fullscreen{
        width: 100%;
        height: 100%;
        max-width: 100%;
        padding: 44px}

    /* When it's visible */
    .u-modal.is-visible .u-modal-box {
                transform: translate(-50%, -50%)}




        /*

        BUTTONS

        */

        /*

        "X" CLOSE BUTTON

        */

        .u-modal-close{
            display: inline-block;

            font-size: 14px;
            font-weight: 300;
            font-style: normal;
            font-weight: bold;
            color: black;
            text-align: center;
            text-decoration: underline;
            cursor: pointer;
            border-bottom: 2px solid rgba(255,255,255,0);

            transition: color 150ms ease-in}

        /* States */
        .u-modal-close:hover,
        .u-modal-close:focus{
            border-bottom-color: currentColor}



        /*

        CTA CLOSE BUTTON

        */

        .u-modal-btn {
            display: inline-block;
            padding: 1em 2em;

            color: white;
            font-weight: bold;
            font-size: 0.875em;
            border: 1px solid orange;
            background-color: orange;
            text-align: center;
            border-radius: 4px;

            transition: all 300ms ease-out}

        /* States */
        .u-modal-btn:hover,
        .u-modal-btn:focus {
            background-color: #af5c0f;
            color: #fff}




        /*

        MAIN CONTAINER

        */

        .u-modal-content {
            display: flex;
            flex-flow: row wrap;

            margin-top: 16px;
            margin-bottom: 16px;
        }

            /*

            KIND OF INNER COLUMNS

            */

            .u-modal-column,
            .u-modal-column--full {
                transition: opacity 500ms ease-in, transform 500ms ease-in;
            }

            /* Effects -> slide-up / slide-down */
            [data-effect^="slide"] {
                opacity: 0;
                transition: transform 600ms ease-in, opacity 550ms 150ms ease-in}
            [data-effect="slide-up"] {
                transform: translateY(30px)}
            [data-effect="slide-down"] {
                transform: translateY(-30px)}

            /* When it's visible */
            .u-modal.is-visible [data-effect^="slide-"] {
                opacity: 1;
                transform: translateY(0)}




                /*

                TEXTS

                */

                .u-modal-title{
                    font-size: 20px;
                    color: currentColor}

                .u-modal-txt{
                    margin-top: 0;
                    margin-bottom: 0;
                    font-size: 16px;
                    color: currentColor}
                .u-modal-title + .u-modal-txt,
                .u-modal-txt + .u-modal-txt {
                    margin-top: 16px}
                .u-modal-title:last-of-type,
                .u-modal-txt:last-of-type {
                    margin-bottom: 16px}

                /* Effects -> slide-up / slide-down */
                .u-modal-txt--animated {
                    opacity: 0;
                    transition: transform 400ms 200ms ease-in;
                    transform: translateY(6px)}

                    /* Each new element must be its delay increased */
                    .u-modal-txt--animated:nth-child(1) {
                        transition: all 300ms 300ms ease-in}
                    .u-modal-txt--animated:nth-child(2) {
                        transition: all 400ms 300ms ease-in}
                    .u-modal-txt--animated:nth-child(3) {
                        transition: all 500ms 300ms ease-in}

                    /* When it's visible */
                    .u-modal.is-visible .u-modal-txt--animated {
                        opacity: 1;
                        transform: translateY(0)}




/*

MEDIA QUERIES

*/


/*

< 640px

*/

@media (min-width: 640px){

    .u-modal-box {
        padding: 32px}

    .u-modal-box--fullscreen {
        padding: 44px}

        .u-modal-txt {
            font-size: 20px}

}



/*

< 768px

*/

@media (min-width: 768px){

    .u-modal-btn {
        font-size: 1em}

    .u-modal-content {
        margin-top: 24px;
        margin-bottom: 24px}

            .u-modal-column--full {
                flex-basis: 100%}
            .u-modal-column {
                flex-basis: 30%}
            .u-modal-column + .u-modal-column {
                flex-basis: 70%;
                padding-left: 16px}

                .u-modal-title {
                    font-size: 24px}
}