/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    background-color: rgba(255, 255, 255, .9);

    @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
        display                : none;
        position               : fixed;
        z-index                : 1000;
        top                    : 0;
        left                   : 0;
        height                 : 100%;
        width                  : 100%;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter        : blur(20px);
        background-color       : rgba(255, 255, 255, .3);
    }
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
    cursor : wait
}

.modal .content {
    position         : absolute;
    left             : 50%;
    top              : 50%;
    -webkit-transform: translate(-50%, -50%);
    transform        : translate(-50%, -50%);
}