html{

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {

    display: grid;
    grid-template: 9% auto 35% / 35% auto 35%;
    margin: 0px;
    background: url(../img/WallpaperQuantyca.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'Roboto', sans-serif;
}

#particles-js {

    grid-area: 1 / 1 / 4 / 4;
    /*place-self: stretch stretch;
    background-size: cover;*/
  }

.formdiv {
    
    grid-area: 2 / 2 / 3 / 3;
    display: grid;
    grid-template: 30% 70% / auto;
    z-index: 1;
    
}

.formbackground {
    
    grid-area: 1 / 1 / 3 / 2;
    background: #ffffffc2;
    border-radius: 31px;
    z-index: -1;
}

.logo {

    grid-area: 1 / 1 / 2 / 2;
    place-self: center;
    border-radius: 21px;
    max-width: 80%;
}

section {

    padding-bottom: 1.5rem;
    grid-area: 2 / 1 / 3 / 2;
    display: grid;
    grid-template: 1fr 1fr 1fr 2rem 1fr/ auto;
}

/* contenedor para etiqueta+text-input */
.textentry {

    background: #ececec;
    border-radius: 19px;
    padding: 7px 19px 0px 19px;
}

/* ePortal */
.div1 {

    grid-row: 1 / 2;
    place-self: center;
}

/*usuario*/
.div2 {

    grid-row: 2 / 3; 
}

/*contraseña*/
.div3 {

    grid-row: 3 / 4;
}

/*espaciado*/
.div4 {

    grid-row: 4 / 5; 
}

/* olvidé la contraseña y botón */
.div5 {

    grid-row: 5 / 6;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

label {

    display: block;
    color: rgb(107, 107, 107);
}

.forget {

    grid-column: 1 / 2;
    place-self: center;
}

input[type=text], input[type=password]{
    
    border: 0;
    background: #ececec;
    outline: none;
}

input[type=text]:focus, input[type=password]:focus {
    
    background: #ececec;
}

.subm {

    grid-column: 2 / 3;
    padding: 9px;
    background: #d8a93269;
    border-radius: 9px;
    border: 5px solid #d8a932;
    color:#856003;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 15pt;

}
.subm:hover {
    color: #ffffff;
    transition: 500ms;
    background: #d8a932;
    border-color: #d8a932;
    cursor: pointer;  
}

section * {
    margin: 0.5rem 1rem 0.5rem 1rem;
}

h1 {
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    color: #b48e1c;
}

.qty-error-msg {
    color: red;
    font-size: 13px;
    letter-spacing: .2px;
    margin-bottom: 8px;
}