He hecho algunos cambios pero ahora se ve el div .PanelLogin y todo su contenido borroso, como si se vieras afectado por el blur del fondo. ¿Por qué? Aquí dejo el código.
Código CSS:
Ver originalbody{
font-family: "Open Sans";
display: block;
}
.ImagenFondoBody{
background-image: url(Imagenes/HeroLimpia.jpg);
-webkit-filter: blur(30px);
-moz-filter: blur(30px);
-o-filter: blur(30px);
-ms-filter: blur(30px);
filter: blur(30px);
text-align:center;
height:100%;
width: 100%;
z-index: -1;
}
.Fondo{
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
}
.PanelLogin{
z-index: 1;
box-shadow: 0 0 10px 10px #FFF;
width: 30%;
min-width: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 30px;
border-radius: 30px;
background-color: #FFF;
}
.Arriba{
text-align:center;
width: 100%;
margin-bottom: 20px;
}
.TituloColegio{
text-align: center;
font: 600 20px "Open Sans";
color: #0072C6;
}
.Abajo{
width: 100%;
}
.CajaCampo{
margin: 10px 0px;
}
.CampoTextoLogin{
border: 1px solid #C0C0C0;
color: #333;
font-size: 13px;
margin: 3px 0px 0px;
padding: 0px 6px;
width: 100%;
height: 24px;
display:block;
}
.CampoTextoLogin:focus{
border: 1px solid #D2AB60;
box-shadow: 0px 0px 2px 2px #F1CA7F;
outline: medium none;
}