body {
    
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    margin: 0;
    width: 100%;
    height: auto; 
    background-color:white;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
  
}
@media (min-width: 480px) {
    body {
        background-color:white;
        
    }
}
@media (min-width: 768px) {
    body {
       background-color:white;
    }
}
@media (min-width: 1200px) {
    body {
      background-color:white;

    }
}
    
#main-header{
    background: #ffffff;
    background-color: #ffffff;

}

nav{
    width: auto;
    
}

img{
    margin:10px 0px 8px 50px;
}

a{ top: 15px;
}

h2{
    color: white;
    margin:30px 100px 0px 7px;
    display: block;
}

#envoltura{
    position:absolute;
    
    /*left y top al 50% para que quede centrado en la pantalla*/
    
    width: 330px;
 
}

#contenedor{
   
    display: block;
   -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    box-shadow: 3px 3px 30px 3px rgba(0,0,0,2);
}
 
#cabecera{
    color: white;
    /*linea azul que separa logo*/
    padding-top: 0;
    /*cabecera-tamaño*/
    height:40px;
    line-height:50px;
    font-size: 20px;
    font-weight: bold;
    text-align:center;
    
}


#cuerpo{
    background:#;
    /*aumentando el 2px 'aparece' un borde*/
    border-width: px 0;
}
 
label{
    color: #4c76a6;
    font-weight: bold;
    margin-top: 1px;
    font-size: 17px;
}

/*input {*/
    /*border: 1px solid #999; No usar esta línea y dejar box-shadow hace efecto de profundidad*/
    /*border-radius: 5px;*/ /*probar con 10px se hacen ovalados los inputs*/
    /*box-shadow: 1px 1px 3px 1px rgba(0,0,0,.1);
    font: bold 12px Arial, Helvetica, sans-serif;
    height: 24px;
    line-height: 20px;
    padding: 0 2px;
    width: 230px;
    background-color: #E8EAF6;
    font-size: 17px;
}
 
input#usuario{
    background:# 0 2px;*/ /*probar con #ddf.
    /*Para que el texto dentro del input se mueva*/
    /*padding-left: 25px;*/ /*Sirve para darle espacio ala imagen, probar con 30px 10px y ver comportamiento*/
/*}
 
input#contrasenia{
    background:# 0 5px;
    padding-left: 25px;
 
}*/
 
.boton{
color: #FFFFFF;
width: 120px;
background-color:#30a3f0;
}
.boton:hover{
color: yellow;
width: 120px;
}
 
/*Tip estas instrucciones animan al boton enviar
 * para que se vea como si se pulsara*/
.boton:active{
    position: relative;
    color: yellow;
    top: 3px;
}
 
#pie{
    color: #0D47A1;
    font-size: 11px;
    height: 25px;
    line-height: 24px;
    text-align: center;
}
 
 
/*Para separar el botón de ingresar*/
p#bot{
    padding-top: 15px;
    color:#4c76a6;
}

footer{
    position: absolute;
    bottom: 0;
    width:100%;
    height:35px;
    background-color: #518ecb;
    color: #4c76a6;
    text-align: right;
    padding-top: 10px;
}

a{
    color: #cce;
}