*{
    padding: 0;
    margin: auto;
}

body,  html{
    height: 100%;
}

header{
    /*background: green;*/
    height: 20%;
}

#menubar {
    background: gray;
    height: 4.3%;
}

main{
    /*background: red;*/
    height: 55.7%;
}

/* *** FORMULARIO *** */

.contenido{
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow:auto;
}


.form_acceso{
    width: 50%;
    height: 230px;
    margin-top: 15px;
    padding: 10px;
    background-color: azure;
    border-radius: 10px;
    border: 0.5px ;
    border-color: deepskyblue;
    border-style: solid;
    text-align: center;
}

.form_acceso h4{
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align:center;    
    color: royalblue;
}

.form_acceso label{
    font-weight: bold;
    color: royalblue;
}

.form_acceso input{
    width: 100%;
    height: 35px;
    margin-bottom: 20px;
    border: 1px;
    border-radius: 5px;
    border-style:solid;
    border-color:dodgerblue;
}

.form_acceso button{
    width: 50%;
    height: 40px;
    background-color: cornflowerblue;
    color: white;
    border-radius: 5px;
}


/* *** FORMULARIO *** */

footer{
    background: blue;
    height: 24%;
}



@media only screen and (min-width : 200px) and (max-width : 800px)
{
    
    body, html {
        width: 100%;
    }
    
    /*.header_section{
        z-index: 5;
        background: url(../imagenes/headerresize.jpg);
        height: 100%;
    }*/
    
    
    .logo{
        width: 100%;
    }
    
    header{
        height: 8.5%;
    }  
    
    .contenido{
    }
    
    main{
        height: 67.2%;
    }
    
    .form_acceso{
        width: 100%;
    }