/*
|--------------------------------------------------------------------------
| Loader
|--------------------------------------------------------------------------
*/

#ceipal-loader{

    width:100%;

    padding:80px 20px;

    text-align:center;

    border-radius:12px;

    position:relative;

    z-index:99;
}

/*
|--------------------------------------------------------------------------
| Loader Wrapper
|--------------------------------------------------------------------------
*/

.ceipal-loader-wrap{

    width:90px;

    height:90px;

    margin:0 auto;

    position:relative;
}

/*
|--------------------------------------------------------------------------
| Ring Loader
|--------------------------------------------------------------------------
*/

.ceipal-loader-ring{

    position:absolute;

    width:90px;

    height:90px;

    border:4px solid transparent;

    border-top:4px solid #000;

    border-radius:50%;

    animation:ceipalRotate 1.2s linear infinite;
}

/*
|--------------------------------------------------------------------------
| Second Ring
|--------------------------------------------------------------------------
*/

.ceipal-loader-ring.delay{

    width:65px;

    height:65px;

    top:12px;

    left:12px;

    border-top:4px solid #666;

    animation-duration:0.9s;

    animation-direction:reverse;
}

/*
|--------------------------------------------------------------------------
| Center Dot
|--------------------------------------------------------------------------
*/

.ceipal-loader-dot{

    width:14px;

    height:14px;

    background:#000;

    border-radius:50%;

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%, -50%);

    animation:ceipalPulse 1.5s ease infinite;
}

/*
|--------------------------------------------------------------------------
| Loading Text
|--------------------------------------------------------------------------
*/

.ceipal-loading-text{

    margin-top:25px;

    font-size:18px;

    font-weight:600;

    color:#222;

    letter-spacing:0.5px;
}

/*
|--------------------------------------------------------------------------
| Rotate Animation
|--------------------------------------------------------------------------
*/

@keyframes ceipalRotate{

    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }
}

/*
|--------------------------------------------------------------------------
| Pulse Animation
|--------------------------------------------------------------------------
*/

@keyframes ceipalPulse{

    0%{
        transform:translate(-50%, -50%) scale(1);
        opacity:1;
    }

    50%{
        transform:translate(-50%, -50%) scale(1.4);
        opacity:0.5;
    }

    100%{
        transform:translate(-50%, -50%) scale(1);
        opacity:1;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    #ceipal-loader{

        padding:60px 15px;
    }

    .ceipal-loading-text{

        font-size:16px;
    }
}