@import url('../css/fonts.css');

*{
    margin: 0;
    padding: 0;
}

body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'principal';
}
.loginContent{
    position: relative;
    overflow: hidden;
    /*linear-gradient(153deg, #035ba2 50%, #0081c5 50%)*/
    background: url('../imagenes/fondo_logn.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.userdates{
    width: 100%;
    height: 32em;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    transform: translateY(46px);
}
.descripTe{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lCImg{
    width: 40em;
    position: absolute;
    top: -24%;
    left: 48%;
    transform: translate(-50%);
    margin-bottom: 25px;
}
.textDe{
    width: 29em;
}
.textDe p:nth-child(1){
    font-size: 27px;
    font-family: 'secundaria';
    text-align: left;
    font-weight: bold;
}
.textDe p:nth-child(2){
    font-size: 18px;
    font-family: 'principal';
    margin: 0px;
    text-align: left;
}
.colForm{
    width: 64%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.contifoForm{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-color: transparent;
}
.contifoForm p {
    font-size: 32px;
    color: white;
    font-family: 'ralewaybold';
    margin-bottom: 0;
    text-transform: none;
    margin-left: 20px;
}
.marginFormGr{
    margin-bottom: 20px;
}
.contenedorFormularioLogin{
    width: 100%;
    height: 34%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contenedorFormularioLogin form{
    width: 100%;
}
.contenedorFormularioLogin .form-control{
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 17em;
    height: 3em;
    border-radius: 0px;
    transition: all .2s ease;
    text-align: center;
    border-color: transparent;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    font-family: 'ralewayregular';
    border-radius: 15px;
}
.contenedorFormularioLogin .form-control::placeholder{
    color:rgba(255, 255, 255, .4);
}
.contenedorFormularioLogin .form-control:focus{
    background: rgba(255, 255, 255, .0);
    color: #fff;
}
#loginButton{
    position: relative;
    /* bottom: -5%; */
    /* left: 50%; */
    /* transform: translate(-50%, 0%) scale(1); */
    font-family: 'ralewaybold';
    overflow: hidden;
    z-index: 2;
    width: 82%;
    height: 3em;
    background:#70a63b;
    outline: none;
    color: #ffffff;
    border: 0px solid transparent;
    border-radius: 15px;
    font-size: 16px;
    cursor: pointer;
    text-transform: capitalize;
    transition: all .5s ease-in-out;
}
#loginButton:hover{
   transform: scale(1.05);
}
.nelicaLogin{
    position: absolute;
    bottom: 0;
}
.nelicaLogin a{
    color: white;
    font-family: 'evolveLight';
    outline: none!important;
    text-decoration: none !important;
    font-size: 12px;
}
.nelicaLogin img{
    width: 22px;
}
@media (max-width:1440){
    #loginButton {
        width: 14em;
        height: 4em;
        font-size: 1rem;
    }
}

/*******************/
@media (max-width:1600px){
    .colForm {
        width: 86%;
    }    
    .contenedorFormularioLogin .form-control {
        width: 16em;
    }
}
@media(max-width:1440px){
    .userdates {
        height: 26em;
    }
}
@media(max-width:1280px){
    .contenedorFormularioLogin .form-control {
        width: 15em;
    }
    .lCImg {
        width: 28em;
    }
}
@media(max-width:1110px){
    .contenedorFormularioLogin .form-control {
        width: 12em;
    }
    .userdates {
        height: 24em;
    }
}
@media(max-width:991px){
    .contifoForm {
        align-items: center;
    }
    .colForm {
        width: 58%;
    }
    .marginFormGr {
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
    }
    .contenedorFormularioLogin .form-control {
        width: 82%;
    }
    .lCImg {
        width: 16em;
    }
    .contenedorFormularioLogin {
        height: 82%;
    }
    .contifoForm p {
        margin-left: 0px;
    }
}
@media(max-width:775px){
    .lCImg {
        top: 9%;
    }
    .userdates {
        height: 100%;
    }
    .descripTe {
        position: relative;
        width: 100%;
        height: auto;
        align-items: flex-end;
    }
    .textDe {
        margin-bottom: 54px;
    }
    .textDe p:nth-child(1) {
        text-align: center;
    }
    .textDe p:nth-child(2) {
        text-align: center;
    }
    .colForm {
        width: 100%;
        height: 53%;
    }
    .contifoForm{
        align-items: center;
    }
    .contenedorFormularioLogin {
        padding: 0px 110px;
    }
}

@media screen and (max-width:575px){
    .descripTe {
        position: relative;
        width: 100%;
        height: auto;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    .contifoForm p {
        font-size: 24px;
    }
    .textDe {
        width: 21em;
        margin-bottom: 40px;
    }
    .textDe p:nth-child(1) {
        font-size: 20px;
    }
    .textDe p:nth-child(2) {
        font-size: 15px;
    }
    #loginButton {
        font-size: 15px;
    }
    .marginFormGr {
        margin-bottom: 12px;
    }
    .contenedorFormularioLogin {
        padding: 0px 10px;
    }
}
@media(max-width:400px){
    .textDe {
        width: 17em;
        margin-bottom: 6px;
    }
    .textDe p:nth-child(1) {
        font-size: 18px;
        margin-bottom: 5px;
    }
    .textDe p:nth-child(2) {
        font-size: 12px;
    }
    .contifoForm {
        width: 17em;
        height: 19em;
    }
    .colForm {
        width: 100%;
        height: 27em;
        align-items: center;
    }
    .contifoForm p {
        font-size: 19px;
        margin-top: 15px;
    }
    #loginButton {
        font-size: 14px;
        bottom: -18%;
        height: 3em;
    }
}
@media(max-width:365px){

    .contifoForm {
        height: 22em;
    }
}
/**************/
@media(max-width:1368px) and (min-width:1110px) and (max-height:720px){
    .lCImg {
        width: 30em;
        top: -35%;
    }
    .userdates {
        height: 22em;
    }
    #loginButton {
        font-size: 18px;
    }
    .contifoForm p {
        font-size: 30px;
    }
}
@media(max-width:830px) and (max-height:420px){
    .lCImg {
        width: 9em;
    }
    .textDe {
        width: 20em;
    }
    .textDe p:nth-child(1) {
        font-size: 22px;
    }
    .textDe p:nth-child(2) {
        font-size: 13px;
    }
    .contifoForm {
        width: 24em;
        height: 26em;
    }
    #loginButton {
        width: 9em;
        font-size: 14px;
        bottom: -17%;
    }
}
@media(max-width:660px) and (max-height:400px){
    .lCImg {
        width: 7em;
        top: 5%;
    }
    .contifoForm {
        width: 21em;
        height: 18em;
    }
    .contifoForm p {
        font-size: 26px;
        margin-top: 18px;
    }
    .marginFormGr {
        margin-bottom: 13px;
    }
    .contenedorFormularioLogin .form-control {
        width: 15em;
    }
    #loginButton {
        bottom: -8%;
        font-size: 11px;
    }
}
@media (max-height:568px) and (min-width:576px){
    .loginContent {
        height: 34.97em;
    }
    .contenedorFormularioLogin {
        height: 13em;
    }
}
@media (max-height:500px) and (max-width:575px){
    .userdates{
        height: 29em;
    }
    .contenedorFormularioLogin {
        height: 20em;
    }
    .loginContent {
        height: 31.22em;
    }
    .lCImg {
        width: 6em;
        top: 0%;
    }
    .textDe p:nth-child(1) {
        font-size: 18px;
        margin-bottom: 10px;
    }
    #loginButton {
        bottom: -5%;
        font-size: 10px;
    }
}