*{

    margin: 0;
    padding: 0;

}

body{

    background-image: url('../../img/system/Fondo_1.jpeg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;

}

.contenedor{

    padding-top: 23%;
    text-align: center;

}

label{
    font-size: 45px;
    color: white;
}

#username{
    margin-left: 30%;
    margin-right: 30%;
    height: 45px;
    width: 40%;
    font-size: 25px;
    text-align: center;

}

#password{
    margin-left: 30%;
    margin-right: 30%;
    height: 45px;
    width: 40%;
    font-size: 25px;
    text-align: center;

}

#btnIngresar{
    margin-left: 30%;
    margin-right: 30%;
    width: 40%;
    height: 50px;
    font-size: 25px;
    border-radius: 30px;
}

#chkRecordar{
    position: absolute;
    margin-top: 10px;
    margin-left: -70px;
}

#msgRecordar{
    margin-left: 40px;
    color: white;
}

#olvidarContraseña{

    font-size: 25px;
    color: white;
    text-decoration: underline;
}

#olvidarContraseña:hover{

    font-size: 25px;
    color: rgb(199, 199, 199);
    text-decoration: underline;
}

.btnRecPass{

    background-color: transparent;
    border: none;
    color: white;
    font-size: 30px;

}

.modal-body{
    background-color: gray;
    border: none;
}

.contenedor-body{
    width: 100%;
    background-color: gray;
    border: 4px white solid;
    color: white;
    text-align: center;
}

.contenedor-body h3{
    padding:  15px 15px 15px 15px;
}

.contenedor-body button{
    border: none;
    font-size: 15px;
    width: 25%;
    height: 40px;
    color: white;
    margin-left: 65%;
    margin-top: 5px;
    margin-bottom: 15px;
    background-color: brown;
}

/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */
/* *************************************************** CSS PARA PANTALLAS DESDE 1600PX WIDTH Y 1680PX MAX ******************************************************************* */
/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */


@media only screen and (max-width: 1700px) and (min-width: 1600px)  {
    
    *{
        margin: 0;
        padding: 0;
    }
    
    body{
        background-image: url('../../img/system/Fondo_1.jpeg');
        background-repeat: no-repeat;
        background-position: bottom top;
        background-size: 100%;
    }
    
    .contenedor{
        padding-top: 23%;
        text-align: center;
    }
    
    label{
        font-size: 45px;
        color: white;
    }
    
    #username{
        margin-left: 30%;
        margin-right: 30%;
        height: 45px;
        width: 40%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #password{
        margin-left: 30%;
        margin-right: 30%;
        height: 45px;
        width: 40%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #btnIngresar{
        margin-left: 30%;
        margin-right: 30%;
        width: 40%;
        height: 50px;
        font-size: 25px;
        border-radius: 30px;
    }
    
    #chkRecordar{
        position: absolute;
        margin-top: 10px;
        margin-left: -70px;
    }
    
    #msgRecordar{
        margin-left: 40px;
        color: white;
    }
    
    #olvidarContraseña{
    
        font-size: 25px;
        color: white;
        text-decoration: underline;
    }
    
    #olvidarContraseña:hover{
    
        font-size: 25px;
        color: rgb(199, 199, 199);
        text-decoration: underline;
    }
    
    .btnRecPass{
    
        background-color: transparent;
        border: none;
        color: white;
        font-size: 30px;
    
    }

}


/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */
/* *************************************************** CSS PARA PANTALLAS DESDE 1599PX WIDTH Y 1500PX MAX ******************************************************************* */
/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */

@media only screen and (max-width: 1599px) and (min-width: 1500px)  {
    
    *{
        margin: 0;
        padding: 0;
    }
    
    body{
        background-color: #b52936;
        overflow-x: hidden;
        background-image: url('../../img/system/Fondo_1.jpeg');
        background-repeat: no-repeat;
        background-position: bottom top;
        background-size: 100% 100%;
    }
    
    .contenedor{
        padding-top: 23%;
        text-align: center;
    }
    
    label{
        font-size: 45px;
        color: white;
    }
    
    #username{
        margin-left: 30%;
        margin-right: 30%;
        height: 45px;
        width: 40%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #password{
        margin-left: 30%;
        margin-right: 30%;
        height: 45px;
        width: 40%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #btnIngresar{
        margin-left: 30%;
        margin-right: 30%;
        width: 40%;
        height: 50px;
        font-size: 25px;
        border-radius: 30px;
    }
    
    #chkRecordar{
        position: absolute;
        margin-top: 10px;
        margin-left: -70px;
    }
    
    #msgRecordar{
        margin-left: 40px;
        color: white;
    }
    
    #olvidarContraseña{
    
        font-size: 25px;
        color: white;
        text-decoration: underline;
    }
    
    #olvidarContraseña:hover{
    
        font-size: 25px;
        color: rgb(199, 199, 199);
        text-decoration: underline;
    }
    
    .btnRecPass{
    
        background-color: transparent;
        border: none;
        color: white;
        font-size: 30px;
    
    }
}

/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */
/* *************************************************** CSS PARA PANTALLAS DESDE 1499PX WIDTH Y 1400PX MAX ******************************************************************* */
/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */

@media only screen and (max-width: 1499px) and (min-width: 1400px)  {
    
    *{
        margin: 0;
        padding: 0;
    }
    
    body{
        overflow: hidden;
        background-image: url('../../img/system/Fondo_2.png');
        background-repeat: no-repeat;
        background-position: bottom top;
        background-size: 100%;
    }
    
    .contenedor{
        padding-top: 28%;
        text-align: center;
    }
    
    label{
        font-size: 45px;
        color: white;
    }
    
    #username{
        margin-left: 30%;
        margin-right: 30%;
        height: 45px;
        width: 40%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #password{
        margin-left: 30%;
        margin-right: 30%;
        height: 45px;
        width: 40%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #btnIngresar{
        margin-left: 30%;
        margin-right: 30%;
        width: 40%;
        height: 50px;
        font-size: 25px;
        border-radius: 30px;
    }
    
    #chkRecordar{
        position: absolute;
        margin-top: 10px;
        margin-left: -70px;
    }
    
    #msgRecordar{
        margin-left: 40px;
        color: white;
    }
    
    #olvidarContraseña{
    
        font-size: 25px;
        color: white;
        text-decoration: underline;
    }
    
    #olvidarContraseña:hover{
    
        font-size: 25px;
        color: rgb(199, 199, 199);
        text-decoration: underline;
    }
    
    .btnRecPass{
    
        background-color: transparent;
        border: none;
        color: white;
        font-size: 30px;
    
    }
}

/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */
/* *************************************************** CSS PARA PANTALLAS DESDE 1399PX WIDTH Y 1300PX MAX ******************************************************************* */
/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */

@media only screen and (max-width: 1399px) and (min-width: 1300px)  {
    
    *{
        margin: 0;
        padding: 0;
    }
    
    body{
        background-color: #b52936;
        overflow-x: hidden;
        background-image: url('../../img/system/Fondo_2.png');
        background-repeat: no-repeat;
        background-position: bottom top;
        background-size: 100%;
    }
    
    .contenedor{
        padding-top: 28%;
        text-align: center;
    }
    
    label{
        font-size: 45px;
        color: white;
    }
    
    #username{
        margin-left: 30%;
        margin-right: 30%;
        height: 45px;
        width: 40%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #password{
        margin-left: 30%;
        margin-right: 30%;
        height: 45px;
        width: 40%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #btnIngresar{
        margin-left: 30%;
        margin-right: 30%;
        width: 40%;
        height: 50px;
        font-size: 25px;
        border-radius: 30px;
    }
    
    #chkRecordar{
        position: absolute;
        margin-top: 10px;
        margin-left: -70px;
    }
    
    #msgRecordar{
        margin-left: 40px;
        color: white;
    }
    
    #olvidarContraseña{
    
        font-size: 25px;
        color: white;
        text-decoration: underline;
    }
    
    #olvidarContraseña:hover{
    
        font-size: 25px;
        color: rgb(199, 199, 199);
        text-decoration: underline;
    }
    
    .btnRecPass{
    
        background-color: transparent;
        border: none;
        color: white;
        font-size: 30px;
    
    }
}

/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */
/* *************************************************** CSS PARA PANTALLAS DESDE 1299PX WIDTH Y 1200PX MAX ******************************************************************* */
/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */

@media only screen and (max-width: 1299px) and (min-width: 1200px)  {
    
    *{
        margin: 0;
        padding: 0;
    }
    
    body{
        background-color: #b52936;
        overflow-x: hidden;
        background-image: url('../../img/system/Fondo_2.png');
        background-repeat: no-repeat;
        background-position: bottom top;
        background-size: 100% 100%;
    }
    
    .contenedor{
        padding-top: 25%;
        text-align: center;
    }
    
    label{
        font-size: 35px;
        color: white;
    }
    
    #username{
        margin-left: 30%;
        margin-right: 30%;
        height: 40px;
        width: 40%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #password{
        margin-left: 30%;
        margin-right: 30%;
        height: 40px;
        width: 40%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #btnIngresar{
        margin-left: 30%;
        margin-right: 30%;
        width: 40%;
        height: 50px;
        font-size: 25px;
        border-radius: 30px;
    }
    
    #chkRecordar{
        position: absolute;
        margin-top: 10px;
        margin-left: -70px;
    }
    
    #msgRecordar{
        margin-left: 40px;
        color: white;
    }
    
    #olvidarContraseña{
    
        font-size: 25px;
        color: white;
        text-decoration: underline;
    }
    
    #olvidarContraseña:hover{
    
        font-size: 25px;
        color: rgb(199, 199, 199);
        text-decoration: underline;
    }
    
    .btnRecPass{
    
        background-color: transparent;
        border: none;
        color: white;
        font-size: 30px;
    
    }
}

/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */
/* *************************************************** CSS PARA PANTALLAS DESDE 1199PX WIDTH Y 1100PX MAX ******************************************************************* */
/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */

@media only screen and (max-width: 1199px) and (min-width: 1100px)  {
    
    *{
        margin: 0;
        padding: 0;
    }
    
    body{
        background-color: #b52936;
        overflow-x: hidden;
        background-image: url('../../img/system/Fondo_2.png');
        background-repeat: no-repeat;
        background-position: bottom top;
        background-size: 100%;
    }
    
    .contenedor{
        padding-top: 28%;
        text-align: center;
    }
    
    label{
        font-size: 35px;
        color: white;
    }
    
    #username{
        margin-left: 30%;
        margin-right: 30%;
        height: 40px;
        width: 40%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #password{
        margin-left: 30%;
        margin-right: 30%;
        height: 40px;
        width: 40%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #btnIngresar{
        margin-left: 30%;
        margin-right: 30%;
        width: 40%;
        height: 50px;
        font-size: 25px;
        border-radius: 30px;
    }
    
    #chkRecordar{
        position: absolute;
        margin-top: 10px;
        margin-left: -70px;
    }
    
    #msgRecordar{
        margin-left: 40px;
        color: white;
    }
    
    #olvidarContraseña{
    
        font-size: 25px;
        color: white;
        text-decoration: underline;
    }
    
    #olvidarContraseña:hover{
    
        font-size: 25px;
        color: rgb(199, 199, 199);
        text-decoration: underline;
    }
    
    .btnRecPass{
    
        background-color: transparent;
        border: none;
        color: white;
        font-size: 30px;
        margin-left: 10px;
    }
}

/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */
/* *************************************************** CSS PARA PANTALLAS DESDE 1099PX WIDTH Y 1000PX MAX ******************************************************************* */
/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */

@media only screen and (max-width: 1099px) and (min-width: 1000px)  {
    
    *{
        margin: 0;
        padding: 0;
    }
    
    body{
        background-color: #b52936;
        overflow-x: hidden;
        background-image: url('../../img/system/Fondo_2.png');
        background-repeat: no-repeat;
        background-position: bottom top;
        background-size: 110% 100%;
    }
    
    .contenedor{
        padding-top: 45%;
        text-align: center;
    }
    
    label{
        font-size: 30px;
        color: white;
    }
    
    #username{
        margin-left: 30%;
        margin-right: 30%;
        height: 40px;
        width: 40%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #password{
        margin-left: 30%;
        margin-right: 30%;
        height: 40px;
        width: 40%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #btnIngresar{
        margin-left: 30%;
        margin-right: 30%;
        width: 40%;
        height: 50px;
        font-size: 25px;
        border-radius: 30px;
    }
    
    #chkRecordar{
        position: absolute;
        margin-left: -70px;
        margin-top: 10px;

    }
    
    #msgRecordar{
        margin-left: 40px;
        color: white;
        margin-top: -10px;

    }
    
    .btnRecPass{
    
        background-color: transparent;
        border: none;
        color: white;
        font-size: 30px;
        margin-left: 10px;
        margin-top: -20px;
    }
}

/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */
/* *************************************************** CSS PARA PANTALLAS DESDE 999PX WIDTH Y 900PX MAX ******************************************************************* */
/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */

@media only screen and (max-width: 999px) and (min-width: 900px)  {
    
    *{
        margin: 0;
        padding: 0;
    }
    
    body{
        background-color: #b52936;
        overflow-x: hidden;
        background-image: url('../../img/system/Fondo_2.png');
        background-repeat: no-repeat;
        background-position: bottom top;
        background-size: 100% 100%;
    }
    
    .contenedor{
        padding-top: 30%;
        text-align: center;
    }
    
    label{
        font-size: 30px;
        color: white;
    }
    
    #username{
        margin-left: 30%;
        margin-right: 30%;
        height: 40px;
        width: 40%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #password{
        margin-left: 30%;
        margin-right: 30%;
        height: 40px;
        width: 40%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #btnIngresar{
        margin-left: 30%;
        margin-right: 30%;
        width: 40%;
        height: 50px;
        font-size: 25px;
        border-radius: 30px;
    }
    
    #chkRecordar{
        position: absolute;
        margin-left: -70px;
        margin-top: 10px;

    }
    
    #msgRecordar{
        margin-left: 40px;
        color: white;
        margin-top: -10px;

    }
    
    .btnRecPass{
    
        background-color: transparent;
        border: none;
        color: white;
        font-size: 30px;
        margin-left: 10px;
        margin-top: -20px;
    }
}

/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */
/* *************************************************** CSS PARA PANTALLAS DESDE 899PX WIDTH Y 800PX MAX ******************************************************************* */
/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */

@media only screen and (max-width: 899px) and (min-width: 800px)  {
    
    *{
        margin: 0;
        padding: 0;
    }
    
    body{
        background-color: #b52936;
        overflow-x: hidden;
        background-image: url('../../img/system/Fondo_2.png');
        background-repeat: no-repeat;
        background-position: bottom top;
        background-size: 130% 100%;
    }
    
    .contenedor{
        padding-top: 40%;
        text-align: center;
    }
    
    label{
        font-size: 30px;
        color: white;
    }
    
    #username{
        margin-left: 25%;
        margin-right: 25%;
        height: 40px;
        width: 50%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #password{
        margin-left: 25%;
        margin-right: 25%;
        height: 40px;
        width: 50%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #btnIngresar{
        margin-left: 25%;
        margin-right: 25%;
        width: 50%;
        height: 50px;
        font-size: 25px;
        border-radius: 30px;
    }
    
    #chkRecordar{
        position: absolute;
        margin-left: -70px;
        margin-top: 10px;

    }
    
    #msgRecordar{
        margin-left: 40px;
        color: white;
        margin-top: -10px;

    }
    
    .btnRecPass{
    
        background-color: transparent;
        border: none;
        color: white;
        font-size: 30px;
        margin-left: 10px;
        margin-top: -20px;
    }
}

/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */
/* *************************************************** CSS PARA PANTALLAS DESDE 799PX WIDTH Y 700PX MAX ******************************************************************* */
/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */

@media only screen and (max-width: 799px) and (min-width: 700px)  {
    
    *{
        margin: 0;
        padding: 0;
    }
    
    body{
        background-color: #b52936;
        overflow-x: hidden;
        background-image: url('../../img/system/Fondo_2.png');
        background-repeat: no-repeat;
        background-position: bottom top;
        background-size: 130% 100%;
    }
    
    .contenedor{
        padding-top: 50%;
        text-align: center;
    }
    
    label{
        font-size: 40px;
        color: white;
    }
    
    #username{
        margin-left: 20%;
        margin-right: 20%;
        height: 40px;
        width: 60%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #password{
        margin-left: 20%;
        margin-right: 20%;
        height: 40px;
        width: 60%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #btnIngresar{
        margin-left: 20%;
        margin-right: 20%;
        width: 60%;
        height: 50px;
        font-size: 25px;
        border-radius: 30px;
    }
    
    #chkRecordar{
        position: absolute;
        margin-left: -70px;
        margin-top: 10px;

    }
    
    #msgRecordar{
        margin-left: 40px;
        color: white;
        margin-top: -10px;

    }
    
    .btnRecPass{
    
        background-color: transparent;
        border: none;
        color: white;
        font-size: 30px;
        margin-left: 10px;
        margin-top: -20px;
    }
}


/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */
/* *************************************************** CSS PARA PANTALLAS DESDE 699PX WIDTH Y 600PX MAX ******************************************************************* */
/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */

@media only screen and (max-width: 699px) and (min-width: 600px)  {
    
    *{
        margin: 0;
        padding: 0;
    }
    
    body{
        background-color: #b52936;
        overflow-x: hidden;
        background-image: url('../../img/system/Fondo_2.png');
        background-repeat: no-repeat;
        background-position: bottom top;
        background-size: 150% 100%;
    }
    
    .contenedor{
        padding-top: 50%;
        text-align: center;
    }
    
    label{
        font-size: 30px;
        color: white;
    }
    
    #username{
        margin-left: 10%;
        margin-right: 10%;
        height: 40px;
        width: 80%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #password{
        margin-left: 10%;
        margin-right: 10%;
        height: 40px;
        width: 80%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #btnIngresar{
        margin-left: 10%;
        margin-right: 10%;
        height: 50px;
        width: 80%;
        font-size: 25px;
        border-radius: 30px;
    }
    
    #chkRecordar{
        position: absolute;
        margin-left: -70px;
        margin-top: 10px;

    }
    
    #msgRecordar{
        margin-left: 40px;
        color: white;
        margin-top: -10px;

    }
    
    .btnRecPass{
    
        background-color: transparent;
        border: none;
        color: white;
        font-size: 30px;
        margin-left: 10px;
        margin-top: -20px;
    }
}

/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */
/* *************************************************** CSS PARA PANTALLAS DESDE 599PX WIDTH Y 500PX MAX ******************************************************************* */
/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */

@media only screen and (max-width: 599px) and (min-width: 500px)  {
    
    *{
        margin: 0;
        padding: 0;
    }
    
    body{
        background-color: #b52936;
        overflow-x: hidden;
        background-image: url('../../img/system/Fondo_2.png');
        background-repeat: no-repeat;
        background-position: bottom top;
        background-size: 180% 100%;
    }
    
    .contenedor{
        padding-top: 60%;
        text-align: center;
    }
    
    label{
        font-size: 30px;
        color: white;
    }
    
    #username{
        margin-left: 15%;
        margin-right: 15%;
        height: 40px;
        width: 70%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #password{
        margin-left: 15%;
        margin-right: 15%;
        height: 40px;
        width: 70%;
        font-size: 25px;
        text-align: center;
    
    }
    
    #btnIngresar{
        margin-left: 15%;
        margin-right: 15%;
        width: 70%;
        height: 50px;
        font-size: 25px;
        border-radius: 30px;
    }
    
    #chkRecordar{
        position: absolute;
        margin-left: -70px;
        margin-top: 10px;

    }
    
    #msgRecordar{
        margin-left: 40px;
        color: white;
        margin-top: -10px;

    }
    
    .btnRecPass{
    
        background-color: transparent;
        border: none;
        color: white;
        font-size: 30px;
        margin-left: 10px;
        margin-top: -20px;
    }
}

/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */
/* *************************************************** CSS PARA PANTALLAS DESDE 499PX WIDTH Y 400PX MAX ******************************************************************* */
/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */

@media only screen and (max-width: 499px) and (min-width: 400px)  {
    
    *{
        margin: 0;
        padding: 0;
    }
    
    body{
        background-color: #b52936;
        overflow-x: hidden;
        background-image: url('../../img/system/Fondo_2.png');
        background-repeat: no-repeat;
        background-position: bottom top;
        background-size: 230% 113%;
    }
    
    .contenedor{
        padding-top: 80%;
        text-align: center;
    }
    
    label{
        font-size: 30px;
        color: white;
    }
    
    #username{
        margin-left: 10%;
        margin-right: 10%;
        height: 40px;
        width: 80%;
        font-size: 20px;
        text-align: center;
    
    }
    
    #password{
        margin-left: 10%;
        margin-right: 10%;
        height: 40px;
        width: 80%;
        font-size: 20px;
        text-align: center;
    
    }
    
    #btnIngresar{
        margin-left: 10%;
        margin-right: 10%;
        height: 50px;
        width: 80%;
        font-size: 25px;
        border-radius: 30px;
    }
    
    #chkRecordar{
        position: absolute;
        margin-left: -70px;
        margin-top: 10px;

    }
    
    #msgRecordar{
        margin-left: 40px;
        color: white;
        margin-top: -10px;

    }
    
    .btnRecPass{
    
        background-color: transparent;
        border: none;
        color: white;
        font-size: 30px;
        margin-left: 10px;
        margin-top: -20px;
    }
}

/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */
/* *************************************************** CSS PARA PANTALLAS DESDE 399PX WIDTH Y 370PX MAX ******************************************************************* */
/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */

@media only screen and (max-width: 399px) and (min-width: 371px)  {
    
    *{
        margin: 0;
        padding: 0;
    }
    
    body{
        background-color: #b52936;
        background-image: url('../../img/system/Fondo_2.png');
        background-repeat: no-repeat;
        background-position: bottom top;
        background-size: 255% 110%;
    }
    
    .contenedor{
        padding-top: 75%;
        text-align: center;
    }
    
    label{
        font-size: 30px;
        color: white;
    }
    
    #username{
        margin-left: 10%;
        margin-right: 10%;
        height: 40px;
        width: 80%;
        font-size: 20px;
        text-align: center;
    
    }
    
    #password{
        margin-left: 10%;
        margin-right: 10%;
        height: 40px;
        width: 80%;
        font-size: 20px;
        text-align: center;
    
    }
    
    #btnIngresar{
        margin-left: 10%;
        margin-right: 10%;
        height: 50px;
        width: 80%;
        font-size: 25px;
        border-radius: 30px;
    }
    
    #chkRecordar{
        position: absolute;
        margin-left: -70px;
        margin-top: 10px;

    }
    
    #msgRecordar{
        margin-left: 40px;
        color: white;
        margin-top: -10px;

    }
    
    .btnRecPass{
    
        background-color: transparent;
        border: none;
        color: white;
        font-size: 30px;
        margin-left: 10px;
        margin-top: -20px;
    }
}

/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */
/* *************************************************** CSS PARA PANTALLAS DESDE 399PX WIDTH Y 300PX MAX ******************************************************************* */
/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */

@media only screen and (max-width: 370px) and (min-width: 350px)  {
    
    *{
        margin: 0;
        padding: 0;

    }
    
    body{
        background-color: #b52936;
        overflow: hidden;
        background-image: url('../../img/system/Fondo_2.png');
        background-repeat: no-repeat;
        background-position: bottom top;
        background-size: 250% 100%;
    }
    
    .contenedor{
        padding-top: 80%;
        text-align: center;
    }
    
    label{
        font-size: 30px;
        color: white;
    }
    
    #username{
        margin-left: 10%;
        margin-right: 10%;
        height: 40px;
        width: 80%;
        font-size: 20px;
        text-align: center;
    
    }
    
    #password{
        margin-left: 10%;
        margin-right: 10%;
        height: 40px;
        width: 80%;
        font-size: 20px;
        text-align: center;
    
    }
    
    #btnIngresar{
        margin-left: 10%;
        margin-right: 10%;
        height: 50px;
        width: 80%;
        font-size: 25px;
        border-radius: 30px;
    }
    
    #chkRecordar{
        position: absolute;
        margin-left: -70px;
        margin-top: 10px;

    }
    
    #msgRecordar{
        margin-left: 40px;
        color: white;
        margin-top: -10px;

    }
    
    .btnRecPass{
    
        background-color: transparent;
        border: none;
        color: white;
        font-size: 30px;
        margin-left: 10px;
        margin-top: -20px;
    }
}

/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */
/* *************************************************** CSS PARA PANTALLAS DESDE 399PX WIDTH Y 300PX MAX ******************************************************************* */
/* ************************************************************************************************************************************************************************** */
/* ************************************************************************************************************************************************************************** */

@media only screen and (max-width: 349px) and (min-width: 300px)  {
    
    *{
        margin: 0;
        padding: 0;
    }
    
    body{
        background-color: #b52936;
        overflow: hidden;
        background-image: url('../../img/system/Fondo_2.png');
        background-repeat: no-repeat;
        background-position: bottom top;
        background-size: 250% 100%;
    }
    
    .contenedor{
        padding-top: 80%;
        text-align: center;
    }
    
    label{
        margin-top: -10px;
        font-size: 30px;
        color: white;
    }
    
    #username{
        margin-left: 10%;
        margin-right: 10%; 
        margin-top: -10px;
        height: 40px;
        width: 80%;
        font-size: 20px;
        text-align: center;
    
    }
    
    #password{
        margin-left: 10%;
        margin-right: 10%;
        margin-top: -10px;
        height: 40px;
        width: 80%;
        font-size: 20px;
        text-align: center;
    
    }
    
    #btnIngresar{
        text-align: top;
        margin-left: 10%;
        margin-right: 10%;
        height: 50px;
        width: 80%;
        font-size: 25px;
        border-radius: 30px;
    }
    
    #chkRecordar{
        position: absolute;
        margin-left: -70px;
        margin-top: 10px;

    }
    
    #msgRecordar{
        margin-left: 40px;
        color: white;
        margin-top: -10px;

    }
    
    .btnRecPass{
    
        background-color: transparent;
        border: none;
        color: white;
        font-size: 30px;
        margin-left: 10px;
        margin-top: -20px;
    }
}