@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-family:"Yantramanav","Trebuchet MS";
    font-size:14px;	
	overflow-y:scroll;
	background:#09C;	
	background: -webkit-radial-gradient(circle, #09C, #0073BE);
	background: radial-gradient(circle, #09C, #0073BE);
}

@supports (-moz-appearance:none) {
  select
  {
  -moz-appearance:none !important;
  background: transparent url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat !important;
  background-position: calc(100% - 5px) center !important;
  }
}

#btngx {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:330px; margin:auto; margin-top:4%; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.24); border-radius: 5px; position:relative}
.inicio_cajaA { width:250px; height:60px; background-color:#FFF; float:left; border-radius:5px 0px 0px 0px; text-align:center; cursor:pointer; transition:0.4s}
.inicio_cajaB { width:250px; height:60px; background-color:#D2D8D8; float:left;  border-radius:0px 5px 0px 0px; text-align:center; cursor:pointer; transition:0.4s}
.inicio_cajaC { width:500px; height:270px; background-color:#FFF; clear:both;  border-radius:0px 0px 5px 5px; display: flex; transition:0.4s}
.inicio_sp1 { margin-top:20px; display:block; font-size: 16px; color: #1565C0;}
.inicio_sp3 {font-size:10px; color:#333333}
#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; z-index: 1; visibility:hidden}

.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); z-index: 1; visibility:hidden}
.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;}
#instrucciones {margin-top: 20px; color: white; border: 1px solid rgba(255, 255, 255, 0.25); padding: 8px; border-radius: 4px; font-family:'Open Sans'; font-size:12px; line-height: 20px; background-color: rgba(0, 0, 0, 0.25); margin-bottom:10px; overflow:hidden; height:40px; transition:0.4s}
#inmas {    background-color: #43A047; color: white; padding: 4px; width: 120px; text-align: center; border-radius: 4px; box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.20); transition:.3s; margin: auto;}
#inmas:hover { background-color:#607D8B; cursor:pointer}
#iplus {font-family: "Open Sans"; color: white; background-color: rgba(0, 0, 0, 0.11); padding: 10px 10px 10px 20px; margin-top: 10px; font-size: 12px; border-radius: 4px; line-height: 20px; margin-bottom:50px}

.zlinks {width:100%; display:table; margin-top:5px}
.zlkop { display:table-cell; text-align:center; width:33%}
.zlkop a {text-decoration:none; color:rgba(255, 255, 255, 0.58);; font-size:12px;}
.zlkop a:hover {text-decoration:underline;}

.invalid { position: absolute; text-align: center; right: 0; left: 0; margin-left: auto; margin-right: auto; color: white; background-color: #EC407A; padding: 2px; border-radius: 0px 0px 5px 5px;; margin-top: -22px; display:none; }

#promo { margin-top: 20px; color: white; border: 1px solid rgba(255, 255, 255, 0.60); padding: 8px; border-radius: 4px; font-family: 'Open Sans'; font-size: 12px; line-height: 20px; background-color: rgb(13 70 94); margin-bottom: 10px;
    overflow: hidden; height: 40px; transition: 0.4s; position: relative;}
#promo::after { content: " ";  width: 45px; height: 45px; background-color: rgb(13 70 94); position: absolute; left: 192px; top: 5px; transform: rotate(45deg); }
#promo1mes { width: 215px; height: 56px; margin-top: -8px; margin-left: -8px; border-radius: 4px 0px 0px 4px; background-color: #e91e63; position: absolute;}
#promotexto { margin-left: 198px; position: absolute; z-index: 1; font-family: 'Open Sans'; font-weight: bold; font-size: 15px; margin-top: 8px; }
#promo1 { font-size: 43px; font-family: 'Open Sans'; font-weight: bold; margin-left: 20px; margin-top: 16px; position: absolute;}
#promomes { margin-left: 50px; margin-top: 7px; font-family: 'Open Sans'; font-weight: bold; font-size: 18px;}

#showpass { position: absolute; margin-top: -43px; font-size: 23px; color: #607d8b63; right: 28px; transition:0.3s ease; }
#showpass:hover { cursor:pointer; color: #2196f36b }
#sh2 { display:none; }

@media (max-width: 650px) {
	.inicio_caja1 { width:95% }
	.inicio_cajaA { width:50% }
	.inicio_cajaB { width:50% }
	.inicio_cajaC { width:100% }
	.login button { max-width: 200px; width:50%;}
	.inicio_caja2 {margin-top:-30px;}
	#instrucciones { height:auto }
	#inmas { display:none;}
	
}