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

/*

GLOBAL CONTAINER & VEIL

*/

.button {
    display: inline-block;
    padding: 20px;
    color: #FD1472;
    text-align: center;
    border: 2px solid #FD1472;
    border-radius: 4px;
    background-color: rgba(255,255,255,0);
    transition: background-color 150ms ease-in, color 150ms 100ms ease-out;
}
.button:hover,
.button:focus {
    color: #fff;
    background-color: red;
}

.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;
    -webkit-transition: all 150ms ease-in;
    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%;
        max-width: 780px;
        padding: 16px;

        color: #fff;
        background-color: #0c0d10;

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

        -webkit-transform: translate(-50%, -55%);
                transform: translate(-50%, -55%);
        -webkit-transition: -webkit-transform 250ms 100ms linear;
                transition: -webkit-transform 250ms 100ms linear;
                transition: transform 250ms 100ms linear;
        transition: transform 250ms 100ms linear, -webkit-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 {
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%)}




        /*

        BUTTONS

        */

        /*

        "X" CLOSE BUTTON

        */

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

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

            -webkit-transition: color 150ms ease-in;
            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: #FD1472;
            font-size: 0.875em;
            border: 1px solid red;
            background-color: transparent;
            text-align: center;
            border-radius: 4px;

            -webkit-transition: all 300ms ease-out;
            transition: all 300ms ease-out}

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




        /*

        MAIN CONTAINER

        */

        .u-modal-content {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;

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

            /*

            KIND OF INNER COLUMNS

            */

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

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

            /* When it's visible */
            .u-modal.is-visible [data-effect^="slide-"] {
                opacity: 1;
                -webkit-transform: translateY(0);
                        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;
                    -webkit-transition: -webkit-transform 400ms 200ms ease-in;
                    transition: -webkit-transform 400ms 200ms ease-in;
                    transition: transform 400ms 200ms ease-in;
                    transition: transform 400ms 200ms ease-in, -webkit-transform 400ms 200ms ease-in;
                    -webkit-transform: translateY(6px);
                            transform: translateY(6px)}

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

                    /* When it's visible */
                    .u-modal.is-visible .u-modal-txt--animated {
                        opacity: 1;
                        -webkit-transform: translateY(0);
                                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 {
                -ms-flex-preferred-size: 100%;
                    flex-basis: 100%}
            .u-modal-column {
                -ms-flex-preferred-size: 30%;
                    flex-basis: 30%}
            .u-modal-column + .u-modal-column {
                -ms-flex-preferred-size: 70%;
                    flex-basis: 70%;
                padding-left: 16px}

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

}