/*==================================================
        FUNDING DREAMERS BOOT LOADER
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

#fd-loader{

    position:fixed;
    inset:0;

    width:100%;
    height:100vh;

    overflow:hidden;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#000;

    z-index:999999999;

    transition:
    opacity .8s ease,
    visibility .8s ease;

}

@keyframes loaderFade{

from{

opacity:0;

}

to{

opacity:1;

}

}

#fd-loader.hide{

    opacity:0;
    visibility:hidden;
    pointer-events:none;

}

/*=====================================
        BACKGROUND
=====================================*/

.fd-bg{

display:none;

}

@keyframes bgFloat{

    0%{

        transform:
        scale(1.05)
        translateY(0px);

    }

    50%{

        transform:
        scale(1.08)
        translateY(-8px);

    }

    100%{

        transform:
        scale(1.05)
        translateY(0px);

    }

}

/*=====================================
            OVERLAY
=====================================*/

.fd-overlay{

position:absolute;

inset:0;

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

background:rgba(5,10,20,.58);

z-index:2;

}

/*=====================================
        PANEL
=====================================*/

.fd-panel{

    position:relative;

    z-index:20;
    max-width:92%;

    padding:45px;

    border-radius:28px;

    background:rgba(8,15,30,.20);

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(25px);

    border:

    1px solid

    rgba(70,150,255,.18);

    box-shadow:

    0 25px 60px rgba(0,0,0,.55),

    0 0 40px rgba(0,132,255,.15);

    box-shadow:

0 25px 70px rgba(0,0,0,.65),

0 0 80px rgba(0,120,255,.18);

}

.fd-panel-glow{

position:absolute;

top:-120px;

left:50%;

transform:translateX(-50%);

width:320px;

height:320px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(0,140,255,.35),

transparent 70%);

filter:blur(60px);

pointer-events:none;

z-index:-1;

animation:panelGlow 6s ease-in-out infinite;

}

@keyframes panelGlow{

0%{

opacity:.4;
transform:translateX(-50%) scale(.9);

}

50%{

opacity:1;
transform:translateX(-50%) scale(1.1);

}

100%{

opacity:.4;
transform:translateX(-50%) scale(.9);

}

}

/*=====================================
        LOGO
=====================================*/

.fd-logo{

    display:block;

    width:130px;

    margin:auto;

    animation:logoFloat 5s ease-in-out infinite;

    filter:

    drop-shadow(0 0 15px #007bff)

    drop-shadow(0 0 35px rgba(0,132,255,.4));

}

@keyframes logoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=====================================
        TITULOS
=====================================*/

.fd-panel h1{

    margin-top:22px;

    text-align:center;

    color:white;

    font-size:44px;

    letter-spacing:8px;

    font-weight:800;

    font-family:Arial,Helvetica,sans-serif;

}

.fd-subtitle{

    margin-top:12px;

    text-align:center;

    color:#78bfff;

    letter-spacing:5px;

    font-size:15px;

    font-weight:500;

}

/*=====================================
        DIVISOR
=====================================*/

.fd-divider{

    width:90px;

    height:4px;

    margin:25px auto 35px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        transparent,
        #2ea0ff,
        transparent
    );

    box-shadow:0 0 20px #2ea0ff;

    animation:dividerPulse 2.5s infinite;

}

@keyframes dividerPulse{

    0%{
        width:60px;
        opacity:.6;
    }

    50%{
        width:110px;
        opacity:1;
    }

    100%{
        width:60px;
        opacity:.6;
    }

}

/*=====================================
        LISTA
=====================================*/

.fd-loading-list{

    width:100%;

}

/*=====================================
        ITEMS
=====================================*/

.fd-item{

    margin-bottom:24px;

}

.fd-item:last-child{

    margin-bottom:0;

}

.fd-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}

.fd-top span{

    color:#fff;

    font-size:15px;

    letter-spacing:.4px;

    font-weight:500;

}

.fd-top span:last-child{

    color:#79c0ff;

    font-weight:700;

}

/*=====================================
        BARRAS
=====================================*/

.fd-bar{

    width:100%;

    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:rgba(255,255,255,.06);

    box-shadow:
        inset 0 0 8px rgba(0,0,0,.45);

}

.fd-fill{

width:0%;

height:100%;

position:relative;

overflow:hidden;

border-radius:999px;

background:linear-gradient(
90deg,
#0d6efd,
#2ea0ff,
#7de8ff
);

box-shadow:

0 0 12px rgba(0,132,255,.45),

0 0 28px rgba(0,132,255,.25);

transition:width .25s linear;

}

.fd-fill::after{

    content:"";

    position:absolute;

    top:0;

    left:-50px;

    width:50px;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.8),
        transparent
    );

    transform:skewX(-20deg);

    animation:shine 1.8s linear infinite;

}

@keyframes shine{

    0%{
        left:-50px;
    }

    100%{
        left:calc(100% + 50px);
    }

}


body.loading #page-content{

    filter:blur(10px);

    transform:scale(1.03);

    transition:

    .8s ease;

}

#page-content{

    transition:

    .8s ease;

}