@charset "utf-8";
/* CSS Document */

@keyframes spinner {
  0% { transform: rotateZ(0deg);  }
  100% { transform: rotateZ(359deg); }
}

html, body {height: 100%;} 
 
body {
    margin: 0;
    padding: 0;
	overflow-x:hidden;
    font-size:14px;	
	overflow-y:scroll;
	background:#09C;	
	background: -webkit-radial-gradient(circle, #09C, #0073BE);
	background: radial-gradient(circle, #09C, #0073BE);
    font-family: "PT Sans"
}

#infox {    color: #FFF;
    font-weight: bold;
    position: absolute;
    width: 260px;
    left: calc(50% - 130px);
    text-align: center;
    top: 50px;
    font-size: 15px; display:none;}

.inicio_caja3 { width:500px; height:35px; margin:auto; text-align:center; margin-top:10px; display:none}
.inicio_caja2 { width:250px; margin:auto; margin-top:0%; }
.inicio_caja1 { width:500px; height:280px; margin:auto; margin-top:7%; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.24); border-radius: 5px; position:relative}
.inicio_cajaA { width:250px; height:70px; background-color:#FFF; float:left; border-radius:5px 0px 0px 0px; text-align:center; cursor:pointer; transition:0.4s}
.inicio_cajaB { width:250px; height:70px; background-color:#D2D8D8; float:left;  border-radius:0px 5px 0px 0px; text-align:center; cursor:pointer; transition:0.4s}
.inicio_cajaC { width:500px; height:280px; background-color:#FFF; clear:both;  border-radius:5px; display: flex; transition:0.4s}
.inicio_sp1 { margin-top:20px; display:block}
#infoerror1 { border-radius: 3px; background-color: #E91E63; color: white; font-size: 12px; text-align: center; padding: 2px; display:none}
.tcheck {position: absolute; top: 120px; width: 200px; left: calc(50% - 100px); text-align: center; font-size: 15px; font-family: "PT Sans"; color: #607D8B; }
.scheck {position: absolute; left: calc(50% - 50px); top: 80px; opacity:0; transition:0.4s}

.login { padding: 10px 20px 10px 20px; width: 90%; max-width: 320px; background: #ffffff; box-sizing: border-box; margin:auto; position:relative}
.spinner { opacity: 1; top: 40%;}
.login input { display: block; padding: 10px 10px; margin-bottom: 10px; width: 100%; border: 1px solid #ddd; transition: border-width 0.2s ease; border-radius: 2px; color: #333; box-sizing: border-box;}
.login input + i.fa { color: #fff; font-size: 1em; position: absolute; margin-top: -35px; opacity: 0; left: 0; transition: all 0.1s ease-in;}
.login input:focus { outline: none; color: #444; border-color: #2196F3; border-left-width: 35px;}
.login input:focus + i.fa { opacity: 1; left: 30px; transition: all 0.25s ease-out;}
.login a { font-size: 0.8em; color: #2196F3; text-decoration: none;}
.spinner { display: block; width: 40px; height: 40px; position: absolute; border: 4px solid #ffffff; border-top-color: rgba(255, 255, 255, 0.3); border-radius: 100%; left: 50%; opacity: 0; margin-left: -20px;
  margin-top: -20px; animation: spinner 0.6s infinite linear; transition: top 0.3s 0.3s ease, opacity 0.3s 0.3s ease, border-radius 0.3s ease; box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);}
.login button { width: 200px; height: 40px; border-radius: 5px; border-style: none; background-color: #64b5f6; color:#FFFFFF }
.login .boton { padding: 10px 0px; text-align: right;}
.login button:hover { cursor: pointer; background: #2196F3; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.28) inset;}
.inactivo {  background-color: #CFD8DC; padding: 4px; border-radius: 3px; text-align: center; display:none}

@media (max-width: 650px) {
	.inicio_caja1 { width:90% }
	.inicio_cajaA { width:50% }
	.inicio_cajaB { width:50% }
	.inicio_cajaC { width:100% }
	.login button { max-width: 200px; width:50%;}
}