/*
|--------------------------------------------------------------------------
| RESET
|--------------------------------------------------------------------------
*/

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

html,
body{
    width:100%;
    height:100%;
    font-family:Arial,Helvetica,sans-serif;
    background:#ffffff;
    color:#313131;
}

/*
|--------------------------------------------------------------------------
| PAGE
|--------------------------------------------------------------------------
*/

body{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

/*
|--------------------------------------------------------------------------
| CARD
|--------------------------------------------------------------------------
*/

.bridge{
    width:100%;
    max-width:520px;
    text-align:center;
}

/*
|--------------------------------------------------------------------------
| SPINNER
|--------------------------------------------------------------------------
*/

.spinner{

    width:46px;
    height:46px;

    margin:0 auto 28px;

    border:4px solid #ececec;
    border-top:4px solid #f38020;

    border-radius:50%;

    animation:spin .9s linear infinite;
}

/*
|--------------------------------------------------------------------------
| TEXT
|--------------------------------------------------------------------------
*/

.bridge-title{

    font-size:30px;
    font-weight:600;

    color:#222;

    margin-bottom:18px;
}

.bridge-text{

    font-size:17px;
    line-height:1.6;

    color:#666;

    margin-bottom:10px;
}

.bridge-subtext{

    font-size:15px;

    color:#999;

    margin-bottom:36px;
}

/*
|--------------------------------------------------------------------------
| BUTTON
|--------------------------------------------------------------------------
*/

.bridge-button{

    display:inline-flex;

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

    min-width:220px;

    height:54px;

    background:#f38020;

    color:#fff;

    font-size:18px;
    font-weight:600;

    border:none;

    border-radius:6px;

    cursor:pointer;

    transition:.2s;
}

.bridge-button:hover{

    background:#e57110;
}

.bridge-button:active{

    transform:scale(.98);
}
/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

.bridge-footer{

    margin-top:32px;

    font-size:12px;

    color:#9a9a9a;

    letter-spacing:.3px;
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:700px){

    .bridge-title{

        font-size:24px;
    }

    .bridge-text{

        font-size:16px;
    }

    .bridge-button{

        width:100%;
    }
}

/*
|--------------------------------------------------------------------------
| ANIMATION
|--------------------------------------------------------------------------
*/

@keyframes spin{

    from{

        transform:rotate(0deg);
    }

    to{

        transform:rotate(360deg);
    }
}
/*
|--------------------------------------------------------------------------
| SLIDER VERIFICATION
|--------------------------------------------------------------------------
*/

.slider-box{
    width:100%;
    max-width:420px;
    margin:28px auto 0;
}

.slider-label{
    text-align:center;
    font-size:15px;
    color:#555;
    margin-bottom:14px;
}

.slider-track{
    position:relative;
    width:100%;
    height:58px;
    border-radius:30px;
    overflow:hidden;
    background:#ececec;
    border:1px solid #d7d7d7;
    cursor:pointer;
}

.slider-fill{
    position:absolute;
    left:0;
    top:0;
    width:0;
    height:100%;
    background:#f5a623;
    transition:width .05s linear;
}

.slider-text{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:#666;
    font-size:15px;
    pointer-events:none;
    white-space:nowrap;
    z-index:3;
}

.slider-thumb{
    position:absolute;
    left:4px;
    top:4px;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#ffffff;
    border:1px solid #d5d5d5;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#666;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
    transition:
        transform .15s,
        box-shadow .15s;
    z-index:2;
}

.slider-thumb.dragging{
    transform:scale(1.08);
    box-shadow:0 4px 14px rgba(0,0,0,.25);
}

.slider-track.active .slider-thumb{
    left:22px;
}