body{

    background: #DCEBFA;  /*  #00FFFF;*/

    text-align: center;

    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/alamacenes-1600x900.jpg");

}

p{

    color: black; 

    font-family: Arial;

    font-size: medium;

    background-color: gray;

}

::placeholder{

    font-size: 15px;

}

footer[role="siteinfo"]{

    align-items: center;

    text-align:center;

    font-size: 10px;

}

.hide {

    max-height: 0 !important;

}

.error{

    background: black;

    color:red; 

    font-size:14px;

    display: inline-block;

    margin-top: 30px;

    border-radius: inherit;

}

/* responsivo movil */

@media screen and (max-width : 635px) { 

    .titulo{

        color: snow;

    }

    .login, .newpas{

        padding-top: 10px;

        padding-bottom: 10px;

        text-align: center;

        transform: translateY(3px);

        background-color: rgba(10, 10, 153, 0.5);; 

        border-radius: 10px;

        height: 250px;      

        width: 100%; 

        font-size: 25px;

        font-family: Arial;

        border-bottom: 2px solid rgb(107, 107, 107);

    }

    .titulologin{

        max-width: 350px;

        font-size: 20px;

        font-family: Arial, Helvetica, sans-serif;

        color: snow;

    }

    .newpas{

        padding-top: 25px;

        padding-bottom: 10px;

        text-align: center;

        box-shadow: 5px 5px #E3E4E5;

        transform: translateY(3px);

        background-color: white;

        border-radius: 10px;

        height: 200px;

        width: 250px;

        font-size: 25px;

        font-family: Arial;

        border-bottom: 2px solid rgb(107, 107, 107);

        border-right: 2px solid gray;

    }

    input[type="submit"] {

        font-family: Arial;

        color: #ffffff;

        font-size: 15px;

        padding-top: 5px;

        padding-right: 30px;

        padding-bottom: 5px;

        padding-left: 30px;

        text-decoration: none;

        -webkit-border-radius: 22px;

        -moz-border-radius: 22px;

        border-radius: 22px;

        text-shadow: 3px 3px 7px #666666;

        border: solid #000000 1px;

        background: -webkit-gradient(linear, 0 0, 0 100%, from(#3483FF), to(#710af7));

        background: -moz-linear-gradient(top, #3483FF, #710af7);

    }

    input[type="submit"]:hover {

        cursor:pointer;

        background: -webkit-gradient(linear, 0 0, 0 100%, from(#c404c4), to(#d97ed9));

        background: -moz-linear-gradient(top, #c404c4, #d97ed9)

    }

    input[typex="submit"]:active{

        box-shadow: 0 1px gray;

        transform: translateY(3px);

    }

    input[type="text"], input[type="password"]{

        color: #000000;

        outline: none;

        line-height: 30px;

        display: block;

        width: 150px;

        border: 0;

        border-bottom: 2px solid gray;

        margin: 10px auto;

        font-size: 12px;

        text-align: center;

    }

    input[type="text"], input[type="elem-captcha"]{

        font-size: 10px;

        text-align: center;

    }

    .error{

        font-size: 12px;

    }

    #user, #pass, #pass1, #pass2, #captcha{

        color: #E3E4E5;

        background: transparent;

        outline: none;

        line-height: 30px;

        display: block;

        width: 250px;

        margin: 10px auto;

        font-size: 17px;

        text-align: center;

        border-bottom: 2px solid gray;

        -webkit-border-radius: 11px;

        border-radius: 11px;

        &:focus {

            background: snow;

            color: black;

            transition: 250ms background ease-in;

        }

    }

    #user::placeholder, #pass::placeholder, #captcha::placeholder {

        color: red; 

    }

    .captcha-imagen{

        border-radius: 10px;

    }

    .cont {

        display: inline-grid;;

        grid-template-columns:  repeat(1, 1fr); /*450px 450px;*/

        grid-gap: 20px;

        padding: 5px;

        text-align: -webkit-center;

        justify-items: center;

        align-items: center;

    }

}

   /* responsive pc  */

@media screen and (min-width: 635px) { 

    .titulo{

        color: snow;

    }

    .login, .newpas{

        padding-top: 10px;

        padding-bottom: 10px;

        text-align: center;

        transform: translateY(3px);

        background-color: rgba(10, 10, 153, 0.5);; 

        border-radius: 10px;

        height: 260px;       

        max-width: 450px;

        font-size: 45px;

        font-family: Arial;

        border-bottom: 2px solid rgb(107, 107, 107);

    }

    .titulologin{

        max-width: 450px;

        font-size: 20px;

        font-family: Arial, Helvetica, sans-serif;

        color: snow;

    }

    .captcha-imagen{

        border-radius: 10px;

    }

    /*.newpas{

        padding-top: 25px;

        padding-bottom: 10px;

        text-align: center;

        box-shadow: 5px 5px #E3E4E5;

        transform: translateY(3px);

        background-color: white;

        border-radius: 10px;

        height: 260px;

        width: 300px;

        font-size: 45px;

        font-family: Arial;

        border-bottom: 2px solid rgb(107, 107, 107);

        border-right: 2px solid gray;

    }*/

    input[type="submit"] {

        font-family: Arial;

        color: #ffffff;

        font-size: 17px;

        padding-top: 5px;

        padding-right: 30px;

        padding-bottom: 5px;

        padding-left: 30px;

        text-decoration: none;

        -webkit-border-radius: 22px;

        -moz-border-radius: 22px;

        border-radius: 22px;

        text-shadow: 3px 3px 7px #666666;

        border: solid #000000 1px;

        background: -webkit-gradient(linear, 0 0, 0 100%, from(#3483FF), to(#710af7));

        background: -moz-linear-gradient(top, #3483FF, #710af7);

    }

    input[type="submit"]:hover {

        cursor:pointer;

        background: -webkit-gradient(linear, 0 0, 0 100%, from(#c404c4), to(#d97ed9));

        background: -moz-linear-gradient(top, #c404c4, #d97ed9)

    }

    #user, #pass, #pass1, #pass2, #captcha{

        color: #E3E4E5;

        background: transparent;

        outline: none;

        line-height: 30px;

        display: block;

        width: 250px;

        margin: 10px auto;

        font-size: 17px;

        text-align: center;

        border-bottom: 2px solid gray;

        -webkit-border-radius: 11px;

        border-radius: 11px;

        &:focus {

            background: snow;

            color: black;

            transition: 250ms background ease-in;

        }

    }

    #user::placeholder, #pass::placeholder, #captcha::placeholder {

        color: red; /* Cambia el color según tus preferencias */

    }

    .elem-captcha{

        color: #000000;

        outline: none;

        border-bottom: 2px solid gray 50px;

        margin: 10px auto;

        width: 350px;

        text-align: center;

    }

    input[type="text"], input[type="password"]{

        color: #000000;

        outline: none;

        line-height: 30px;

        display: block;

        width: 150px;

        border: 0;

        border-bottom: 2px solid gray;

        font-size: 12px;

        text-align: center;

    }

    .error{

        font-size: 15px;

    }

    .cont {

        display: inline-grid;;

        grid-template-columns:  repeat(2, 1fr); /*450px 450px;*/

        grid-gap: 20px;

        padding: 5px;

        text-align: -webkit-center;

        justify-items: center;

        align-items: center;

    }

}