/* =========================================
   PORTAL LAYANAN GTK KABUPATEN KONAWE
   03-splash.css
   Version 6.0
   Author : Haldi Ali Syukur
========================================= */

/* =========================================
   SPLASH SCREEN
========================================= */

#splash{
    position:fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:linear-gradient(135deg,#1565c0,#0d47a1);
    color:#ffffff;
    z-index:99999;
    transition:opacity .8s ease,visibility .8s ease;
}

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

#splash img{
    width:220px;
    max-width:70%;
    margin-bottom:28px;
    animation:logoSplash 1.2s ease;
}

/* =========================================
   JUDUL
========================================= */

#splash h2{
    font-size:28px;
    font-weight:400;
    margin-bottom:8px;
    opacity:.95;
}

#splash h1{
    font-size:52px;
    font-weight:700;
    margin-bottom:10px;
    letter-spacing:.5px;
}

#splash h3{
    font-size:30px;
    font-weight:500;
    color:#FFE082;
    margin-bottom:22px;
}

/* =========================================
   DESKRIPSI
========================================= */

#splash p{
    max-width:700px;
    padding:0 25px;
    font-size:20px;
    line-height:1.8;
    opacity:.95;
}

/* =========================================
   LOADING BAR
========================================= */

#splash .loading{
    width:220px;
    height:6px;
    margin-top:35px;
    background:rgba(255,255,255,.25);
    border-radius:30px;
    overflow:hidden;
}

#splash .loading span{
    display:block;
    width:40%;
    height:100%;
    background:#FFD54F;
    border-radius:30px;
    animation:loading 2s linear infinite;
}

/* =========================================
   HIDE
========================================= */

#splash.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

/* =========================================
   ANIMATION
========================================= */

@keyframes logoSplash{
    from{
        opacity:0;
        transform:scale(.7);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes loading{
    0%{
        transform:translateX(-100%);
    }
    100%{
        transform:translateX(260%);
    }
}

/* =========================================
   TABLET
========================================= */

@media(max-width:992px){

#splash img{
    width:180px;
}

#splash h1{
    font-size:42px;
}

#splash h2{
    font-size:24px;
}

#splash h3{
    font-size:24px;
}

#splash p{
    font-size:18px;
}

}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

#splash img{
    width:150px;
}

#splash h1{
    font-size:34px;
}

#splash h2{
    font-size:20px;
}

#splash h3{
    font-size:20px;
}

#splash p{
    font-size:16px;
}

#splash .loading{
    width:170px;
}

}

/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:480px){

#splash img{
    width:130px;
}

#splash h1{
    font-size:28px;
}

#splash h2{
    font-size:18px;
}

#splash h3{
    font-size:18px;
}

#splash p{
    font-size:15px;
    line-height:1.7;
}

}