/*==================================================
    DELSECTOR
    Landing de Redirección
==================================================*/

/*==============================
= Reset
==============================*/

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    height:100%;

}

body{

    min-height:100vh;

    font-family:

        Arial,
        Helvetica,
        sans-serif;

    background:

        linear-gradient(
            180deg,
            #444444 0%,
            #323232 100%
        );

    color:#333333;

    opacity:1;

    transition:opacity .35s ease;

}

body.fade-out{

    opacity:0;

}

/*==============================
= Layout
==============================*/

.landing{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

}

/*==============================
= Card
==============================*/

.card{

    width:100%;

    max-width:760px;

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:

        0 20px 55px rgba(0,0,0,.35);

}

/*==============================
= Header
==============================*/

.card-header{

    width:100%;

}

.header-bg{

    width:100%;

    height:170px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        linear-gradient(
            180deg,
            #666666 0%,
            #545454 18%,
            #474747 35%,
            #3b3b3b 60%,
            #303030 100%
        );

    border-bottom:4px solid #c8bf2a;

}

.logo-delsector{

    width:430px;

    max-width:90%;

    height:auto;

    display:block;

}

/*==============================
= Body
==============================*/

.card-body{

    padding:55px;

    text-align:center;

}

h1{

    font-size:30px;

    font-weight:300;

    color:#2d2d2d;

    margin-bottom:22px;

}

.subtitle{

    font-size:20px;

    line-height:1.7;

    color:#555555;

    margin-bottom:42px;

}

/*==============================
= Logo Guarino
==============================*/

.logo-guarino{

    width:220px;

    max-width:60%;

    height:auto;

    display:block;

    margin:

        0 auto
        35px;

}

/*==============================
= Link
==============================*/

.site-link{

    display:inline-block;

    margin-bottom:40px;

    text-decoration:none;

    color:#7b9318;

    font-size:24px;

    font-weight:bold;

}

/*==============================
= Progress
==============================*/

.progress{

    width:100%;

    height:12px;

    border-radius:30px;

    overflow:hidden;

    background:#ececec;

    margin-bottom:25px;

}

.progress-bar{

    width:0;

    height:100%;

    background:

        linear-gradient(
            90deg,
            #7b9318,
            #c8bf2a
        );

}

/*==============================
= Counter
==============================*/

.counter-text{

    font-size:17px;

    color:#666666;

    margin-bottom:35px;

}

.counter-text strong{

    color:#7b9318;

}

/*==============================
= Button
==============================*/

.button{

    display:inline-block;

    padding:

        18px
        42px;

    border-radius:8px;

    text-decoration:none;

    color:#ffffff;

    font-weight:bold;

    background:

        linear-gradient(
            180deg,
            #92ad1e,
            #789116
        );

    transition:.25s;

}

.button:hover{

    transform:translateY(-2px);

    box-shadow:

        0 10px 20px rgba(0,0,0,.20);

}

/*==============================
= Responsive
==============================*/

@media (max-width:768px){

    .card-body{

        padding:35px 25px;

    }

    .header-bg{

        height:140px;

    }

    .logo-delsector{

        width:320px;

    }

    h1{

        font-size:32px;

    }

    .subtitle{

        font-size:18px;

    }

    .logo-guarino{

        max-width:70%;

    }

    .button{

        width:100%;

    }

}

@media (max-width:480px){

    .header-bg{

        height:120px;

    }

    .logo-delsector{

        width:260px;

    }

    h1{

        font-size:28px;

    }

}