*,
*:before,
*:after{box-sizing:border-box}


body{
background-color:#000;
color:#666;
font-family:'Open Sans', sans-serif;
font-weight:400;
display:flex;
flex-direction:column;
margin:0;
padding:0;
min-height:100vh}

img{max-width:100%;height:auto}

a:link, a:visited, a:active{text-decoration:none}
a:hover{text-decoration:none}

h1,h2,h3,h4,h5,h6{margin:0;padding:0;text-align:center}

header,main,footer{background-color:#ccc;margin:auto;width:490px;text-align:center}
main{flex:1}
footer{padding-bottom:.5rem}

article{margin:auto; padding:1rem 0; width:90%}

/* HEADER */
.hAzul{background-color:#33ccff;color:#fff}
.hAzul h2{text-transform:uppercase;font-weight:300}
.hAzul h3{font-weight:800; padding-bottom:.7rem}

/* GEOLOCALIZACION */
.geolocalizacion{width:100%}
#geolocation-test{background-color:#006699; color:#fff; text-align:center; padding:.5rem 0}
#geolocation-test p{margin:.5rem 0; padding:0}

/* FECHA */
.fecha, .semana{width:90%; margin:auto}
.fecha h2, .semana h2{font-size:2.2rem; padding:1rem 0; color:#000}
.fecha h3, .semana h3{text-transform:uppercase;font-weight:300; color:#006699}
.semana{padding:1rem 0}
.horario{background-color:rgba(255,255,255,.4); padding:.4rem .8rem}

/* VALIDACIÓN */
ul{list-style:none; margin:.5rem auto; padding:0}
li{padding:.3rem 1rem; margin:3px 0; text-align:left; color:#666; font-weight:bold; background-color:rgba(255,255,255,.3)}
#canvas{background-color:#fff; padding:0; margin:0}

.dSem{background-color:#666;border-radius:.8em;color:#fff;display:inline-block;line-height:1.6em;margin-right:.5rem;text-align:center;width:1.6em}

.centro{text-align:center; padding:1rem 0}
.bienvenida{background-image:url(../img/imagenLogin.jpg); background-repeat:no-repeat; background-position:top}

.login{width:90%; margin:7rem auto 0 auto; background-color:rgba(255,255,255,.5); padding:3rem}
.login h1{margin-bottom:1rem}
.azul{width:100%; margin:0; padding:1.5rem 1rem;}

input, textarea{padding:12px; margin:8px auto; display:inline-block; border:0; color:#000; background-color:#fff; border-radius:5px; width:100%}
.button{background-color:#33ccff; border:none; color:#003366; padding:1rem; margin:.5rem 0 0 0; text-align:center; text-decoration:none; display:inline-block; width:45%}

#respuesta{text-align:center; color:#C00;}
#saveSignature{display:none}

/* BOTONES */
.btn{display:inline-block; border:none; text-align:center; border-radius:5px; text-transform:uppercase}
.btn{padding:1rem 3rem; margin:0}
.btnSize{width:100%}

.btn1{display:inline-block; border:none; text-align:center; border-radius:50px; width:90%; text-transform:uppercase; padding:1rem 0; margin:0}

.btnAzul{background-color:#33ccff; color:#fff}
.btnAzul:hover{background-color:rgba(0,102,153,.5); color:#fff}

.btnBlanco{background-color:#fff; color:#33ccff; font-weight:800; font-size:1.5rem}
.btnBlanco:hover{background-color:rgba(0,102,153,.5); color:#fff}

@media screen and (max-width:600px){
header,main,footer{width:100%}
.login{width:90%; padding:3rem 1.5rem}
}