@font-face {
    font-family: 'Montserrat-Medium';
    src: url('fonts/Montserrat-Medium.ttf') format('truetype');
}


body {
    margin: 0;
    padding: 0;
    font-family: Montserrat-Medium, sans-serif;
    background: url("../images/bg_login_m.png");
    background-repeat: no-repeat;
    background-size: cover;
}

#btnLogin, #btnCancelar, #btnEnviar {
    cursor: pointer;
    font-family: Montserrat-Medium, sans-serif;
}

.div_bg_grey a {
    cursor: pointer;
}

.text-30 {
    font-size: 30px;
}

.text-25 {
    font-size: 25px;
}

.text-23 {
    font-size: 23px;
}

.text-20 {
    font-size: 20px;
}

.text-18 {
    font-size: 18px;
}

.text-14 {
    font-size: 14px;
}

.color-white {
    color: #fff;
}

.color-black {
    color: #585858;
}

.div_cnt_login {
    height: 100vh;
    margin: auto;
    padding: 0 15px;
}

    .div_cnt_login .cnt_login_leyend {
        float: left;
        font-size: 20px;
        color: #fff;
        padding: 10% 0 0 0;
        margin: 0 0 30px 0;
    }

    .div_cnt_login .cnt-form_login {
        float: right;
       /* width: 100%;*/
        padding: 5% 0 0 0;
    }

        .div_cnt_login .cnt-form_login .div_bg_orange {
            border-radius: 0 20px 0 0;
            padding: 23px 20px;
            background: url("../images/bg_orange.png") no-repeat left #ff910c;
            color: #fff;
        }

        .div_cnt_login .cnt-form_login .div_bg_white {
            background: #fff;
            padding: 5px 20px 40px 20px;
        }

            .div_cnt_login .cnt-form_login .div_bg_white input {
                width: 100%;
                padding: 10px 10px;
                padding-right: 40px;
                margin: 0 0 10px 0;
                border: 1px solid #c7c7c7;
                border-radius: 5px;
                color: #1e1e1e;
                font-size: 16px;
                outline: none;
                font-family: Montserrat-Medium, sans-serif !important;
            }

            .div_cnt_login .cnt-form_login .div_bg_white button {
                font-size: 18px;
                font-weigth: bold;
                color: #fff;
                background: #484848;
                border: 0;
                border-radius: 10px;
                width: 100%;
                height: 50px;
                margin: 0 0 30px 0;
            }

            .div_cnt_login .cnt-form_login .div_bg_white .icon_input {
                float: right;
                z-index: 1;
                position: relative;
                margin: -43px 5px 0 0;
            }

        .div_cnt_login .cnt-form_login .div_bg_grey {
            border-radius: 0 0 0 20px;
            padding: 22px 20px;
            background: url("../images/bg_grey.png") no-repeat right #313131;
            color: #fff;
            margin: 0 0 50px 0;
        }

            .div_cnt_login .cnt-form_login .div_bg_grey a {
                text-decoration: none;
                border: 1px solid #fff;
                border-radius: 10px;
                text-align: center;
                width: 100%;
                display: inline-block;
                padding: 14px 0;
                color: #fff;
            }

.btn_recover_pass {
    font-size: 12px;
    text-align: center;
}

    .btn_recover_pass a {
        text-decoration: none;
        color: #fb550c;
    }

.cnt_pcsistel2020 {
    font-size: 17px;
    color: #fff;
    margin: 30% 0 0 0;
}


@media (max-width: 800px) {
    .cnt_login_leyend{
        display: none;
    }
}
    @media (min-width: 1200px) {
        body {
            background: url("../images/bg_login.png");
            background-repeat: no-repeat;
            background-size: cover;
        }

        .div_cnt_login {
            padding: 0 10%;
        }

            .div_cnt_login .cnt_login_leyend {
                font-size: 25px;
                padding: 5% 0 0 0;
            }

            .div_cnt_login .cnt-form_login {
                width: 450px;
            }

                .div_cnt_login .cnt-form_login .div_bg_orange {
                    padding: 23px 60px;
                }

                .div_cnt_login .cnt-form_login .div_bg_white {
                    padding: 20px 30px 40px 30px;
                }

                .div_cnt_login .cnt-form_login .div_bg_grey {
                    padding: 22px 60px;
                    margin: 0;
                }

        .cnt_pcsistel2020 {
            margin: 100% 0 0 0;
        }
    }

    @media (min-width: 1440px) {
        .div_cnt_login {
            padding: 0 15%;
        }
    }



    .input-icons i {
        position: absolute;
        font-size: 20px;
        margin-left: -45px;
    }

    .input-icons {
        width: 100%;
        margin-bottom: 10px;
    }

    .icon {
        padding: 10px 0px;
        color: green;
        min-width: 50px;
        text-align: center;
    }

    .btn-eye {
        cursor: pointer;
    }






    /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        position: relative;
        margin: auto;
        padding: 0;
        width: 80%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s;
        border-radius: 0px 20px 0px 20px;
    }

    /* Add Animation */
    @-webkit-keyframes animatetop {
        from {
            top: -300px;
            opacity: 0
        }

        to {
            top: 0;
            opacity: 1
        }
    }

    @keyframes animatetop {
        from {
            top: -300px;
            opacity: 0
        }

        to {
            top: 0;
            opacity: 1
        }
    }

    /* The Close Button */
    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

    .modal-header {
        padding: 2px 16px;
        background-color: #FF910C;
        color: white;
        border-radius: 0 20px 0 0;
    }

    .modal-body {
        padding: 20px 16px;
        background-color: #fefefe;
    }

    .modal-footer {
        padding: 2px 16px;
        background-color: #313131;
        color: white;
        border-radius: 0px 0px 0px 20px;
        height: 80px;
    }

    .modal input {
        width: 100%;
        padding: 10px 10px;
        margin: 0 0 10px 0;
        border: 1px solid #c7c7c7;
        border-radius: 5px;
        color: #1e1e1e;
        font-size: 16px;
        outline: none;
        font-family: Montserrat-Medium, sans-serif !important;
    }

    .btn-modal {
        font-size: 18px;
        font-weigth: bold;
        color: #fff;
        background: #484848;
        border: 0;
        border-radius: 10px;
        width: 45%;
        height: 50px;
        margin: 0 0 30px 0;
    }

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    .dv-modal-footer {
        float: left;
        width: 100%;
        margin: 15px 0px;
    }

    #btnLogin:hover {
        box-shadow: 2px 2px 5px #999;
        font-size: 19px;
    }

    #btnModalContrasena:hover {
        font-size: 13px;
        text-decoration: underline;
    }

    #btnCrearCuenta:hover {
        box-shadow: 2px 2px 5px #999;
        font-size: 17px;
    }















    .loader-root {
        width: 32px;
        height: 32px;
        position: absolute;
        margin-top: -36px;
        margin-left: 8px;
    }

    .loader {
        font-size: 10px;
        margin: 30% auto;
        text-indent: -9999em;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #ffffff;
        background: -moz-linear-gradient(left, #FF910C 10%, rgba(255, 255, 255, 0) 42%);
        background: -webkit-linear-gradient(left, #FF910C 10%, rgba(255, 255, 255, 0) 42%);
        background: -o-linear-gradient(left, #FF910C 10%, rgba(255, 255, 255, 0) 42%);
        background: -ms-linear-gradient(left, #FF910C 10%, rgba(255, 255, 255, 0) 42%);
        background: linear-gradient(to right, #FF910C 10%, rgba(255, 255, 255, 0) 42%);
        position: relative;
        -webkit-animation: load3 1.4s infinite linear;
        animation: load3 1.4s infinite linear;
    }

        .loader:before {
            width: 50%;
            height: 50%;
            background: #FF910C;
            border-radius: 100% 0 0 0;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
        }

        .loader:after {
            background: #484848;
            width: 75%;
            height: 75%;
            border-radius: 50%;
            content: '';
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

    @-webkit-keyframes load3 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

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

    @keyframes load3 {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

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



    #load-login {
        display: none;
    }


    #btnCancelar:hover, #btnEnviar:hover {
        box-shadow: 1px 1px 3px #999;
        font-size: 19px;
    }