@font-face
{
    font-family: "Aller";
    src: url('../font/Aller_Lt.ttf') format('opentype');
}
@font-face
{
    font-family: "AllerRg";
    src: url('../font/Aller_Rg.ttf') format('opentype');
}

body
{
    font-size: x-large;
    padding: 0;
    margin: 0;
    color: black;
    background-color: LightGray;
    text-align: center;
}
#cabecera
{
    width: 100%;
    height: 150px;
    position: absolute;
}
.banner
{
    width: 100%;
    height: 160px;
}
#contenedor {
    position: relative;
    width: 1200px;
    height: 700px;
    margin: 0 auto;
}

/* Imagen izquierda como fondo */
.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Imagen derecha */
.right {
    position: absolute;
    top: 0px;
    right: 0;
    width: 450px;
    height: 500px;
    z-index: 2;
}

/* Formulario sobre la imagen derecha */
#formulario {
    font-family: Calibri Light;
    font-size: 24px;
    color: Orange;
    position: absolute;
    top: 150px;
    right: 80px;
    z-index: 3;
}
.boton
{
    text-align: center;
    color: Gray;
    height: 20px;
    width: 103px;
    font-weight: bold;
    border-style: none;
    background-image: linear-gradient(bottom, rgb(163,163,163) 16%, rgb(250,250,250) 58%);
    background-image: -o-linear-gradient(bottom, rgb(163,163,163) 16%, rgb(250,250,250) 58%);
    background-image: -moz-linear-gradient(bottom, rgb(163,163,163) 16%, rgb(250,250,250) 58%);
    background-image: -webkit-linear-gradient(bottom, rgb(163,163,163) 16%, rgb(250,250,250) 58%);
    background-image: -ms-linear-gradient(bottom, rgb(163,163,163) 16%, rgb(250,250,250) 58%);
}

.boton:hover
{
    color: Black;
    background-image: linear-gradient(bottom, rgb(250,160,73) 100%, rgb(250,250,250) 58%);
    background-image: -o-linear-gradient(bottom, rgb(250,160,73) 100%, rgb(250,250,250) 58%);
    background-image: -moz-linear-gradient(bottom, rgb(250,160,73) 100%, rgb(250,250,250) 58%);
    background-image: -webkit-linear-gradient(bottom, rgb(250,160,73) 100%, rgb(250,250,250) 58%);
    background-image: -ms-linear-gradient(bottom, rgb(250,160,73) 100%, rgb(250,250,250) 58%);
}

.lblRecibo
{
    font-family: Calibri;
    font-size: 50px;
    color: Black;
    position: absolute;
    margin-left: 140px;
    margin-top: 510px;
}
.inputsLog
{
    width: 160px;
    height: 30px;
    background-color: #F7EEEE;
    color: #000000;
    box-shadow: 2px 2px 0 #828181;
    border-style: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%, rgb(219,219,219) 78%);
    background: -o-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%, rgb(219,219,219) 78%);
    background: -moz-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%, rgb(219,219,219) 78%);
    background: -webkit-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%, rgb(219,219,219) 78%);
    background: -ms-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%, rgb(219,219,219) 78%);
}