/* Este es el q uso commo propio depues de AdminLite 
eliminando cosas del general
Estilos protopios GENERALES para todas la páginas
lo carga el Top_01.asp*/
/*-------------------------------------------------*/
/* 1) UNIVERSALES:Definir estilos generales para todas las etiquetas */
/*-------------------------------------------------*/
/* Reseteo universal */
	* {
		border: 0;
		/*Obligar a todo el sitio este orden de Fonts*/
		/*Luego borrar los restantes y usar el que del usuario*/
		/*selecione en el css_configurado revisar luego y programar esto*/
		/*Fuentes seguras van sin comillas por ser naturales de tosos los navegadores y son de una sola palabra si son mas hay que ponerlas entre comillas */
		font-family: Verdana, Arial, sans-serif, "Chalet",  Helvetica; /*Fuentes seguras van sin comillas por ser naturales de tosos los navegadores */
		/*es mejor dejar el tamaño del font a criterio del navegador*/
		/*font-size: 12px;  tamaño tradicional inicial de los navegadores*/
		/*font-size: 1rem;  es el tamaño por defecto o predeterminado */
		margin: 0;
		padding: 0;	
	}
/* FinReseteo universal */

/*Elimina la linea de contorno cuando tiene
foco ejemplo los botones*/
	*:focus {
		outline: none;
	}
/*Fin Elimina la linea de contorno cuando tiene

/* Fuentes externar o especiales */
	@font-face {
		font-family: "Chalet";
		src: 	url("../fonts/Chalet.eot");	
		src: 	url("../fonts/Chalet.eot?#iefix") format("embedded-opentype"),	
		url("../fonts/Chalet.woff") format("woff"),	
		url("../fonts/Chalet.ttf") format("truetype"),	
		url("../fonts/Chalet.svg#Chalet") format("svg");	
		font-weight: normal;
		font-style: normal;
	}
	@font-face {
		font-family: "Pecita";
		src: 	url("../fonts/Pecita.eot");	
		src: 	url("../fonts/Pecita.eot?#iefix") format("embedded-opentype"),	
		url("../fonts/Pecita.woff") format("woff"),	
		url("../fonts/Pecita.ttf") format("truetype"),	
		url("../fonts/Pecita.svg#Pecita") format("svg");	
		font-weight: normal;
		font-style: normal;
	}
/* FinFuentes externar o especiales */

/* ETIQUETAS:.Definir estilos para las ETIQUETAS propias dehtml5*/
/* Fin ETIQUETAS:.Definir estilos para las ETIQUETAS propias dehtml5*/

/*-.tener imagenes y objetos flexibles se logra con lo siguiente*/
/*cambia de tamaño de forma dinámica response web design*/
	audio, 
	iframe, 
	img, 
	nav, 
	video,
	marquee, 
	table {
		max-width: 100%;
		/* ERROR height: auto; agregado luego 2014/12/27*/
		/* ERROR width: auto/9;  Bug de ie8 */
	}
/* Fin cambia de tamaño de forma dinámica response web design*/

/*Ajustar dinámicamente las imagenes*/
	img {
		max-width: 100%;
		height: auto;
		/*Logro que la imagen banner se ajuste a la pantall*/
		/*pero daña el resto
		width:100%;*/
	}
/*Fin Ajustar dinámicamente las imagenes*/

	body {
		margin: 0 auto; /*obliga a centrar el cuerpo a una distanci 0 del centr*/
		max-width: 98%;
	}
/* esta etiqueta se usa para describir archivo, immagen etc..*/
	filecaption {
		font-size: .85rem;
		padding: .25rem;
		text-align: center;
	}

	footer {
	border: 1.5px solid;	 
	border-color:#F90; /*naranja*/
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;  
	max-width: 95%;
	padding: .25rem;
	margin-bottom: .2rem;
	width: 98%;
}

/* Cabeceras h1 h2 h3 maneja booststrap */

/* Linea */
	hr {
		border: .5px dashed;
		margin: .2rem 0;
	}
	header {
		margin: 0 auto;
		text-align: center;
		width: 98%;
	}
/* Apariencia a las cajas input*/
/* de tipo boton no lo uso solo lo veo
de ejemplo ya tengo en lcasses los botones
Esto debe de sobrar ya q se sobreescribe luego BORRAR*/
	input[type="button"]{
		background:#F60;
		border:thin solid transparent;
		border-radius: .2rem;
		-moz-border-radius: .2rem;
		-webkit-border-radius: .2rem;  
		padding: .5rem;
	}
	input[type="email"],
	input[type="numbre"],
	input[type="checkbox"],/* No se puede alnterar el estilo*/ 
	input[type="password"],
	option,  
	select,  
	input[type="text"],
	input[type="textarea"]{
		background-color:#ffc; /*amarillo clarito*/
		border: .1rem solid #F90; /*naranja*/ 
		border-radius: .2rem;
		-moz-border-radius: .2rem;
		-webkit-border-radius: .2rem;
		cursor:pointer;
		font-size: .75rem;
		padding: .1rem;
	}
	input[type="email"]:focus, 
	input[type="number"]:focus, 
	input[type="checkbox"]:focus,/*No se puede alnterar el estilo*/
	input[type="password"]:focus, 
	input[type="select"]:focus,
	input[type="text"]:focus, 
	input[type="textarea"]:focus{
		background: #FFC; 
		border: .9rem solid #3C0;/*3C0 verde manzana*/
		outline: medium outset #F90;/* naranja*/
	}
	input[type="radio"], label{
		cursor:pointer;
	}	
	input[type="color"]{
		cursor:pointer;
		height:35px;
		width:35px;
	}	
/*Alterar los inputs si estan vacios o con error */
/*Campo con error*/
	input:required,
	input:invalid,
	select:required
	select:invalid {
		/*Muestra una imagen dentro del imput*/
		background: #FFC url(../imagenes6/invalid.jpg) no-repeat 98% center;
	}
/*campo sin error*/
	input:required:valid,
	select:required:valid {
		/*Muestra una imagen dentro del input bg FFC*/
		background: #FFF url(../imagenes6/valid.png) no-repeat 98% center;
	}

/*Estilo especial checkbox y ratiobuton*/
/*utilizo en planilla de inscripcion version2*/
/*Se requiere para esconder el chek y salga mensaje requerido en el sitio*/
/*http://codepen.io/juanbrujo/embed/oIqzC*/
/*solo usado el check*/
/*es chck respecial que aparece en la planilla de inscrip.Versio 2*/
/*solo susado en formulario_tipo_2 ojo afecta a los demas chk si se saca de aca*/
	.custom-radio, .custom-checkbox  {
		clip: rect(1px 1px 1px 1px);
		clip: rect(1px, 1px, 1px, 1px);
		left: 10rem;
		position: absolute;	
	}
	section#formularario_tipo_2 [type="checkbox"] + label:after {
		content: '';
		position: absolute;
	}
	section#formularario_tipo_2 [type="checkbox"] + label {
		color: #e74c3c;
		cursor: pointer;
		display: block;
		/*font-size: 2.5rem;*/
		/*font-weight: bold;*/
		line-height: 36px;
		padding-left: 1rem;
		position: relative;
	}
	section#formularario_tipo_2 [type="checkbox"] + label:after {
		height: 30px;
		left: 0;
		top: 0; 
		transition: all 0.5s ease-in;
		-ms-transition: all 0.5s ease-in;  /* para IE */
		-moz-transition: all 0.5s ease-in;  /* para Firefox mozilla */
		-o-transition: all 0.5s ease-in;  /* para Opere */
		-webkit-transition: all 0.5s ease-in;  /* para Crom Safar */
		width: 30px; 
	}
	section#formularario_tipo_2 [type="checkbox"] + label:hover {
		color: #FFF;
		background: #3C0;/*verde manzana*/
		border-color: #F00 #C30 #C30 #F00;
		border:double;
		border-radius: .95rem;
		-moz-border-radius: .95rem;
		-webkit-border-radius: .95rem;
		transition: all 0.5s ease-in;
		-ms-transition: all 0.5s ease-in;  /* para IE */
		-moz-transition: all 0.5s ease-in;  /* para Firefox mozilla */
		-o-transition: all 0.5s ease-in;  /* para Opere */
		-webkit-transition: all 0.5s ease-in;  /* para Crom Safar */
		text-shadow: black 0.3em 0.3em 0.4em;
	}
	/* OFF */
	section#formularario_tipo_2 [type="checkbox"]:not(:checked) + label:after {
	background: url('../imagenes6/check_off.png') left center no-repeat;
	}
	/* ON */
	section#formularario_tipo_2 [type="checkbox"]:checked + label {
	color: #fff;
	}
	section#formularario_tipo_2 [type="checkbox"]:checked + label:after {
	background: url('../imagenes6/check_on.png') left center no-repeat;
	}
/*Fin Estilo espacial checkbox y ratiobuton*/
/* Listar Ordenadas*/
	ol {
	padding: 0 2rem; 	
	}
	/* al tener espacio silgnifrica aplicar el estilo a los li que se encuentren dentro de las lo*/
	ol li {
	padding: 1rem 0; 	
	}
/*Estilos para las tablas
Ver quien usa y quitar luego se maneja con boostrap*/
	table {
	/*Con auto se le indica al navehador q ajuste los margenes, con 0 se elimnan margenes*/
	border: 1px solid;	 
	max-width: 100%;
	}
	table.Tabla_Estilo_1 {
	margin-left:auto;
	margin-right:auto;
	padding-left:4px;
	padding-right:4px;
	vertical-align:top;
	}
	/*Aplicar border aca ya que al pasar a HTML5 no toma lo de la pagina html*/ 
	td, th, thead, caption {
	/*Con auto se le indica al navegador q ajuste los margenes, con 0 se elimnan margenes*/
	border-style: solid;
	border-width: .1rem;
	/*height:2rem;*/
	margin: 0 auto; 	
	padding-left: .2rem;
	padding-right: .2rem;
	padding-bottom: .2rem; 
	padding-top: .2rem; 
	}
	/*Tablas td Fondo Amarillo Claro Claro, Borde naranca */
	/* Usado en Descriptiva*/
	td.td_Estilo_01 {
	background-color: #FFC;
	border-color: #F30;
	border-style: solid;
	border-width: .1rem;
	padding-left: .2rem;
	padding-right: .2rem;
	}
	/* Evita que ajusten el usuario el tamaño, es necesario por responsewebdesign */

/*-------------------------------------------------*/
/*3) IDENTIFICADORES:Definir los estilos para los IDENTIFICADORES (id). Los id' # */
/*-------------------------------------------------*/
/* Hacer como un titulo en una especie de de banner */
/*usalo en boletas primaria maternal y preescolar*/
	div#area_texto,
	div#area_nota{
	display: inline-block;
	width:90%;		
	}
	div#area_nota{
	width:5%;		
	}
	#banner_AppEduRed,
	#banner_Marquesina1,
	#banner_NoticiasGenerales1,
	#banner_NoticiasGenerales2{
	background-color: #FFF;
	padding: .25rem;
	margin-bottom: .2rem;
	width: 98%;
	}
	#banner_AppEduRed{
	font-size: .6rem;
	margin-bottom: .2rem;
	padding: .15rem;
	}
	#banner_NoticiasGenerales1_Ajuste_1{
	background-color: #FFF;
	/*height:570px;*/
	margin-bottom: .2rem;
	overflow: auto;	
	padding: .25rem;
	width: 96%;	
	overflow: auto;
	}
	#banner_periododeprueba {
	background-color:#FF6;
	color:#093;
	font-size: 1.5rem;
	font-weight: bold ;	
	max-width: 97%;
	padding: .25rem;
	margin-bottom: 0.5rem;
	width: 96%;
	}
	#banner_suspensiondeServicio {
	background: #FF0000; /* rojo */ 
	border-color: #FFFF00; /* amarillo */
	color:#FFFF00;
	font-size: .8rem;
	font-weight: bold ;	
	padding: .15rem;
	margin-bottom: 0.5rem;
	width: 96%;
	}
	#banner_usuarios_datos {
	width: 96%;
	}
	/*Monta la imagen en el boton de borrar input */
	input#borrar{
	background: #FF0 url(../imagenes6/BorrarPapelera1.png) no-repeat 98% center;
	max-width: 7rem;
	min-width: 6rem;
	}
	input#borrar:hover{
	color: #FFF;
	background: #900; /* Rojo Ladrillo */
	border-color: #F00 #C30 #C30 #F00;/*rojo, otro rojo,*/
	border:double;
	border-radius: .95rem;
	-moz-border-radius: .95rem;
	-webkit-border-radius: .95rem;
	transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	}
	/*Monta la imagen en el boton de buscar input */
	input#buscar {
	background: #FF0 url(../imagenes6/Buscar.ico) no-repeat 98% center;
	max-width: 6rem;
	min-width: 5rem;
	}
	/*Monta la imagen en el boton de Modificar input*/
	input#modificar{
	background: #FF0 url(../imagenes6/valid.png) no-repeat 98% center;
	max-width: 7rem;
	min-width: 6rem;
	}
	input#modificar:hover{
	color: #FFF;
	background: #3C0;/*verde manzana*/
	border-color: #F00 #C30 #C30 #F00;/*rojo, otro rojo,*/
	border:double;
	border-radius: .95rem;
	-moz-border-radius: .95rem;
	-webkit-border-radius: .95rem;
	transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	}
	#cabecera_y_escudo {
	/*	max-width: 95%;*/
	/*	margin: .1rem .1rem;*/
	/*	padding: .7rem .6rem;*/
	border:1px solid;
	margin-bottom: .2rem;
	width: 98%;
	}
	#cabecera {
	display:inline-block;
	vertical-align: top;
	width: 80%;
	}
	/*adapta la imegn de la cabecera a lo ancho*/
	#cabecera img{
	width: 100%;
	}
	#escudo {
	border:1px;
	display:inline-block;
	vertical-align: top;
	width: 15%;
	}
/*Efecto rotativo y ampliacion loco como para las noticias*/
	#divloco div {
	border:1px solid #f00;
	margin: 0rem auto;
	text-align:center;
	transition: all 2s ease-in-out;
	-webkit-transition: all 2s ease-in-out;
	-moz-transition: all 2s ease-in-out;
	-o-transition: all 2s ease-in-out;
	-ms-transition: all 2s ease-in-out;
	}
	#divloco div:hover, #divloco div.hover_effect {
	-webkit-transform:rotate(720deg) scale(2,2);
	-moz-transform:rotate(720deg) scale(2,2);
	-o-transform:rotate(720deg) scale(2,2);
	-ms-transform:rotate(720deg) scale(2,2);
	transform:rotate(720deg) scale(2,2);
	}
/* Fin Efecto rotativo y ampliacion loco como para las noticias*/
/* Nombre del Colegio*/
	#nombredelcolegio  {
 		font-size: 2rem;
 		font-weight: bold ;	
 		margin-bottom: .2rem;
 		padding: .25rem;
 		padding: .85rem;
	}
/* Fin Nombre del Colegio*/
	/*AdmiLTE AdmiLite menú colapsado en body agregar sidebar-collapse*/
	.main-sidebar {
		transition: width 0.3s;
	}
	.main-sidebar:hover {
		width: 250px;
	}
	.main-sidebar .nav-item .nav-link span {
		display: none;
		transition: display 0.3s;
	}
	.main-sidebar:hover .nav-item .nav-link span {
		display: inline;
	}
/* Fin AdmiLTE AdmiLite menu colapsado*/
/* Creo es Menú viejo o edudatosSe referencia en el div antes del menú*/
	#menu  {
	background-color:#FF6;
	font-size:.3rem;
	height:2.8rem;
	margin-top: .25rem;
	margin-bottom: .25rem;
	max-width: 98%;
	padding: .5rem .1rem .1rem .1rem;
	text-align: left;
	width: 98%;
	alignment-adjust:auto;
	}
/* Fin Creo es Menú viejo o edudatosSe referencia en el div antes del menú*/
/*Especial para ocultar la lista de colegios y los enlaces*/
	#ocultar {
	background-color:#FFF;
	color:#FFFFFF;
	font-size: .1rem;
	}
	#ocultar a,
	#ocultar a:active,
	#ocultar a:link,
	#ocultar a:visited{
	color:#ffffff;
	text-decoration: none;
	}
/* Fin Especial para ocultar la lista de colegios y los enlaces*/
/* Contenido section*/
	section#contenido {
		border-radius: .2rem;
		-moz-border-radius: .2rem;
		-webkit-border-radius: .2rem;
		display:inline-block;
		/*   margin: 0em 0rem 0rem .5rem ;*/
		/*	margin: .1rem .1rem;*/
		/*	max-width: 95%;*/
		/*	padding: .7rem .6rem; me deja separa a la izquierda en iphone*/
		margin: 0 auto;
		/*	padding: .5rem;*/
		vertical-align: top;
		width: 100%;		
	}
/* Fin Contenido section*/
/*FORMULARIOS*/
/*formularario_tipo_1 y comunes de todos*/
	/* Gradient Generador  http://www.colorzilla.com/gradient-editor/*/
	/*formularario_tipo_1*/
	/* Para dar estilo a los formularios de ingreso de datos*/
	/*Pruebas form http://html5tutoriales.com/images/Tutoriales/ElementosBasicos/HTML/T0202/T0202.html*/
	/*Usado en: RegistrodeUsuario, Deposito Bancarios, Parametros*/
	section#formularario_tipo_1 form,
	section#formularario_tipo_2 form {
		/*Pasa a los archivos de color */
		/* 	background-color: #FBE080; Amarillo ocre*/
		/*		background-color: #FFC;*//*Amarillo claro */
		/*		background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#FBE080), color-stop(1, #C0C0C0) );*/
		/*	background: -moz-linear-gradient( center bottom, #FBE080 0%, #C0C0C0 100% ); */
		border: solid;
		border-color: #F60;
		border-radius: .2rem; 
		-moz-border-radius: .2rem;
		-webkit-border-radius: .2rem;
		border-style:solid;
		border-width: .1rem;
		margin: 0 auto .1rem auto;
		overflow: auto;
		padding: .1rem .2rem .0rem .2rem;
		width: 100%;
	}
	section#formularario_tipo_1 form ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	section#formularario_tipo_1 form ul li {
		margin: .2rem 0 0 0;
		padding: 0;
	}
	section#formularario_tipo_1 form * {
		line-height: 1rem;
	}
	section#formularario_tipo_1 fieldset,
	section#formularario_tipo_2 fieldset{
		background: #FFFFFF;
		border: .1rem solid #593131;
		border-radius: .2rem; 
		-moz-border-radius: .2rem;
		-webkit-border-radius: .2rem;
		margin: 0 0 .1rem .1rem;
		padding: 0 .2rem .2rem .2rem;
	}
	section#formularario_tipo_1 legend,
	section#formularario_tipo_2 legend {
	background: #ffc;
	border: .1rem solid #593131;
	border-radius: 30% 15%;
	-moz-border-radius: 30% 15%;
	-webkit-border-radius: 30% 15%;
	color: #000;
	font-size: 0.8rem;
	font-weight: bold;
	padding: .5rem;
	margin: 0;
	text-align: center;
	}
	section#formularario_tipo_1 label,
	section#formularario_tipo_2 label {
	clear: left;
	display: block;
	float: left;
	font-size: .7rem;
	/*font-weight: bold;*/
	padding: .2rem 0 0 0;
	margin: .1rem .2rem 0 0;
	text-align: right;
	width: 20%;
	}
	section#formularario_tipo_1 color,
	section#formularario_tipo_1 date, 
	section#formularario_tipo_1 input,  
	section#formularario_tipo_1 number, 
	section#formularario_tipo_1 radio,
	section#formularario_tipo_1 select, 
	section#formularario_tipo_1 textarea  {
	background-color:#FFC; /*amarillo clarito*/
	/*border: .2rem solid #eae1c0;*/
	border: .1rem solid #F90; /*naranja*/ 
	border-radius: .1rem;
	-moz-border-radius: .1rem;
	-webkit-border-radius: .1rem;  
	display: block;
	margin: 0;
	padding: .2rem;
	width: 30%;
	}
	section#formularario_tipo_1 input,
	section#formularario_tipo_2 input  {
	font-size: .9rem;
	}
	section#formularario_tipo_1 textarea {
	font-size: .9rem;
	height: 5rem;
	}
	/*esto lo aplicare a todo elimnando java funcion function foco(celda) usato asi:*/
	/* onFocus="foco(this);" onBlur="focoFuera(this)" ELINAR luego el java*/
	/* usa si algun elemneto esta en focus por ejemplo boton*/
	section#formularario_tipo_1 form *:focus,
	section#formularario_tipo_2 form *:focus {
	background: #FFc; /*amarillo*/
	/*  	border: 2px solid #593131;*/
	border: .2rem solid #3C0;/*verde manzana*/
	/*font-weight: bold;*/
	color: red;
	outline: none;
	transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-in;  /* para IE */
	-moz-transition: all 0.5s ease-in;  /* para Firefox mozilla */
	-o-transition: all 0.5s ease-in;  /* para Opere */
	-webkit-transition: all 0.5s ease-in;  /* para Crom Safar */
	}
	/*NO USO Ocurre con el llenado de valoores correcto o validoas*/
	section#formularario_tipo_1 input:valid, 
	textarea:valid {
	background: #efe;/*si lo quito se pone amarillo*/
	/*background-color:#FFC; amarillo clarito*/
	}
	/*Alterar los imputs si estan vacios o con error */
	/*Campo con error*/
	section#formularario_tipo_1 input:required:invalid, 
	section#formularario_tipo_3 input:required:invalid{
	/*	border: .3rem solid red; */
	/*Muestra una imagen dentro del imput*/
	background: #FFC url(../imagenes6/invalid.jpg) no-repeat 98% center;
	}
	/*campo sin error*/
	section#formularario_tipo_1 input:required:valid,
	section#formularario_tipo_3 input:required:valid {
	/*	border: .3rem solid green;*/
	/*Muestra una imagen dentro del input*/
	background: #FFC url(../imagenes6/valid.png) no-repeat 98% center;
	}
	/*Me traigo los estilos de class btnTipo_02 menos la imagen*/
	section#formularario_tipo_1 input[type="submit"],
	section#formularario_tipo_2 input[type="submit"], 
	section#formularario_tipo_3 input[type="submit"] {
	/*Muestra una imagen dentro del imput*/
	background: #FFc url(../imagenes6/valid.png) no-repeat 98% center;
	border: .2rem solid #F90; /*naranja*/
	border-radius: .2rem;
	-moz-border-radius: .2rem;
	-webkit-border-radius: .2rem;  
	color: #900;
	cursor: pointer;
	margin: 0px auto 0 auto;
	font-size: .7rem;
	/*font-weight: bold;*/
	height: 2rem;
	/*	margin-top: .5rem;*/
	padding: .1rem;
	width: 13rem;
	-webkit-appearance: none;
	}
	section#formularario_tipo_1 input[type="submit"]:hover,
	section#formularario_tipo_2 input[type="submit"]:hover, 
	section#formularario_tipo_3 input[type="submit"]:hover{
	/*Muestra una imagen dentro del submit*/
	/*Fondo verde manzana borde amarillo*/
	background: #3C0 url(../imagenes6/valid.png) no-repeat 98% center; /*naranja*/
	border: .2rem solid #FFc;
	border-radius: .95rem;
	-moz-border-radius: .95rem;
	-webkit-border-radius: .95rem;  
	cursor: pointer;
	color: #FFF;
	font-size: .65rem;
	-ms-transition: all 0.5s ease-in;  /* para IE */
	-moz-transition: all 0.5s ease-in;  /* para Firefox mozilla */
	-o-transition: all 0.5s ease-in;  /* para Opere */
	-webkit-transition: all 0.5s ease-in;  /* para Crom Safar */
	transition: all 0.5s ease-in;
	text-shadow: black 0.3em 0.3em 0.4em;
	}
	section#formularario_tipo_1 input[type="submit"]:active,
	section#formularario_tipo_2 input[type="submit"]:active, 
	section#formularario_tipo_3 input[type="submit"]:active {
		background: #eee;
	}
	/* Id s particulares de este formulario */
	/*Letra de la cedula espacio menor */
	section#formularario_tipo_1 #letracedula1 {
	display:inline-block;
	vertical-align: top;
	width: 3.2rem;	
	}
	/*Numero de la cedula espacio menor y continua en misma linea*/
	section#formularario_tipo_1 #cedula1, 
	section#formularario_tipo_1 #matricula,
	section#formularario_tipo_1 #tipodeusuario {
		display:inline-block;
		vertical-align:top;
		width: 10rem;	
	}
	/*Ajustar linea de fecha alineada dia mes año combos*/
	section#formularario_tipo_1 #d_dia, 
	section#formularario_tipo_1 #d_mes  {
		display:inline-block;
		width: 3.5rem;	
	}
	section#formularario_tipo_1 #d_ano  {
		display:inline-block;
		width: 4.4rem;	
	}
	/* todas las q lleven span explicativo tentran inline-block*/
	section#formularario_tipo_1 #email, 
	section#formularario_tipo_1 #txtusuario {
		display:inline-block;
		vertical-align:top;
	}
	/* === Form hints === */  
	section#formularario_tipo_1 .form_hint {  
		background: #d45252;  /* naranja */
		border-radius: .8rem;  
		-moz-border-radius: .8rem;
		-webkit-border-radius: .8rem;  
		color: white;
		display:inline-block;
		font-size: .7rem;  
		margin-left: 1rem;  
		padding: .1rem .6rem;  
		width: 35%;
	}
	/* Formolario donde se pide el lapso de la evaluacion*/
	section#formularario_tipo_1 #lapso_combo_2,
	section#formularario_tipo_1 #lapso_submit_2 { 	
		display:inline-block;
		vertical-align:top;
		width: 30%;	
	}
	section#formularario_tipo_1 #lapso_combo_2 {
		width: 60%;	
	}
	section#formularario_tipo_1 #lapso_submit_2 {
		width: 30%;	
	}
	/* Ancho de los controles tamaño*/
	section#formularario_tipo_1 .ancho98{
		width: 98%;	
	}
	/* Formulario donde se pide el Deposito y Transferencia Bancario */
	section#formularario_tipo_1 .mitad {
		/*	display:inline-block;*/
		width: 49.5%;	
		display:inline-block;
	}
	section#formularario_tipo_1 #numero_de_deposito,
	section#formularario_tipo_1 #numero_de_cuenta_donde_deposito, 
	section#formularario_tipo_1 #nombre_del_depositante,
	section#formularario_tipo_1 #nombre_del_banco,
	section#formularario_tipo_1 #monto_depositado,
	section#formularario_tipo_1 #tipo_de_deposito,
	section#formularario_tipo_1 #numero_de_cheque,
	section#formularario_tipo_1 #nombre_del_banco_cliente,
	section#formularario_tipo_1 #concepto_del_deposito,
	section#formularario_tipo_1 #comentario,
	section#formularario_tipo_1 #numero_de_desde{
		display:inline-block;
		vertical-align:top;
		width: 18%;
	}
	/*Radios Boton*/
	section#formularario_tipo_1 #cuenta1,
	section#formularario_tipo_1 #cuenta2,
	section#formularario_tipo_1 #cuenta3,
	section#formularario_tipo_1 #cuenta4,
	section#formularario_tipo_1 #cuentaPagoMovil{
		display:inline-block;
		margin: .5rem auto;
		width: 1%;
	}
	/*Usandose en Parametros*/
	section#formularario_tipo_1 .ubicacion1 {
		display:inline-block;
		float: left;
		vertical-align:top;
	}
	/* Usado en carga de notas primaria en compencias nota*/
	/* indicadore nota es por cambios en modelo 06*/
	section#formularario_tipo_1 .ubicacion2{
		display:inline-block;
		float: right;
		vertical-align:top;
	}
	section#formularario_tipo_1 .comboSiNo{
		width: 3.3rem;
	}
	section#formularario_tipo_1 .comboCurso{
		width: 4.2rem;
	}
	section#formularario_tipo_1 .tamanopparaPorcentajes{
		width: 4.5rem;
		text-align:right;
	}
	section#formularario_tipo_1 .tamanoparaNotasdePrimaria{
		width: 2rem;
		text-align:left;
	}
	section#formularario_tipo_1 .comboTamano2{
		width: 13%;
	}
	section#formularario_tipo_1 .tamano50{
		width: 50%;
	}
	section#formularario_tipo_1 .tamano70{
		width: 70%;
	}
	section#formularario_tipo_1 .tamano75{
		width: 75%;
	}
	section#formularario_tipo_1 .tamano85{
		width: 85%;
	}
	section#formularario_tipo_1 .tamano93{
		width: 93%;
	}
	section#formularario_tipo_1 .TamanCalendario{
		width: 8rem;	
	}
	section#formularario_tipo_1 .labelTamano1{
		width: 25%;
	}
	section#formularario_tipo_1 .textoTamano1{
		width: 18%;
	}
	section#formularario_tipo_1 .textoTamano10{
		width: 10%;
	}
	section#formularario_tipo_1 .textoTamano40{
		width: 40%;
	}
	section#formularario_tipo_1 .textoTamano45{
		width: 45%;
	}
	section#formularario_tipo_1 .textoTamano70{
		width: 70%;
	}
	section#formularario_tipo_1 .HintsTamano1{
		width: 55%;
	}
	section#formularario_tipo_1 .HintsTamano2{
		width: 49%;
	}
	section#formularario_tipo_1 .HintsTamano3{
		width: 29%;
	}
	section#formularario_tipo_1 .HintsTaman4{
		width: 47%;
	}
	/*Ajustes especiales para Carga de Notas*/
	/**/
	section#formularario_tipo_1 #nombreAlumno {
		/*	float: none;*/
		/*	 clear: none;*/
		/*display:inline-block;*/
		border-radius: .5rem;
		-moz-border-radius: .5rem;
		-webkit-border-radius: .5rem;  
		display: block;
		font-size: .7rem;
		padding:0 .3rem 0 0;
		width: 17rem;	
	}
	section#formularario_tipo_1 .muestraNota {
		border-radius: .5rem;
		-moz-border-radius: .5rem;
		-webkit-border-radius: .5rem;  
		display:inline-block;
		/*  	display: block;*/
		clear: none;
		/*	float: none;*/
		font-size: .7rem;
		padding:0 .3rem 0 0;
		width: 2.3rem;	
	}
/* Fin formularario_tipo_1 y comunes todos*/
/*formularario_tipo_2*/
/*Algunos ajustes se toman del tipo_1 formularario_tipo_1*/
/* Usado en Planilla de Inscripcion*/
/*por algo raro solo puedo cambiar aca el tamaño en chek del planilla de inscripcio*/
	section#formularario_tipo_2 label  {
	font-size: 1.5rem;
	width: 23%;
	}
	/* Fin formularario_tipo_2*/
	/*formularario_tipo_3*/
	/*Un tipo de formulario mas completo y complejo*/
	/*partiendo de tipo_1 pero no dependiente */
	/* se paramatrecira todos ajustar para no usar los li ul etc...*/
	/*utilizado en: encio de correos,  */
	/*Lo usa el manejo areas, correos4 y se entiende con somenote */
	/*extiendo su usua ya qle el 1 me choca con somenotes de procesador de palabras*/
	section#formularario_tipo_3 form {
		border: solid;
		border-color: #F60;
		border-radius: .2rem; 
		-moz-border-radius: .2rem;
		-webkit-border-radius: .2rem;  
		border-style:solid;
		border-width: .1rem;
		margin: 0 auto .7rem auto;
		overflow: auto;
		padding: .1rem .2rem .0rem .2rem;
		width: 100%;
	}
	/*No se usa los li ul */
	section#formularario_tipo_3 form ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	section#formularario_tipo_3 form ul li {
		margin: .2rem 0 0 0;
		padding: 0;
	}
	section#formularario_tipo_3 fieldset {
		/*background: #FAFF9E;*/
		background: #FFF;
		/*
		background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#C0C0C0), color-stop(1, #FBE080) );
		background: -moz-linear-gradient( center bottom, #C0C0C0 0%, #FBE080 100% );  
		*/
		border: 1px solid #593131;
		border-radius: .2rem; 
		-moz-border-radius: .2rem;
		-webkit-border-radius: .2rem;
		margin: .1rem;
		padding: .1rem;
	}
	section#formularario_tipo_3 legend {
		background: #FFE98C;
		border: .2rem solid #593131;
		border-radius: 50% 35%;
		color: #000;
		display:block;  	
		font-size: .9rem;
		font-weight: bold;
		padding: .2rem;
		margin: .1rem;
		text-align: center;
	}
	section#formularario_tipo_3 checkbox, 
	section#formularario_tipo_3 color,
	section#formularario_tipo_3 date, 
	section#formularario_tipo_3 input,  
	section#formularario_tipo_3 number, 
	section#formularario_tipo_3 option,
	section#formularario_tipo_3 radio,
	section#formularario_tipo_3 select, 
	section#formularario_tipo_3 text,
	section#formularario_tipo_3 textarea {
		background-color:#FFC;
		border: .1rem solid #3C0;
		border-radius: .2rem;
		-moz-border-radius: .2rem;
		-webkit-border-radius: .2rem;  
		margin: .2rem .1rem .2rem 0rem;
	}
	section#formularario_tipo_3 input  {
		font-size: .8rem;
	}
	section#formularario_tipo_3 label  {
		font-size: .8rem;
		margin: .2rem .1rem .2rem .5rem;
		text-align: right;
	}
	section#formularario_tipo_3 form *:focus {
		background: #FFF; 
		border: .2rem solid #3C0;
		border-radius: .2rem;
		-moz-border-radius: .2rem;
		-webkit-border-radius: .2rem;  
		/*font-weight: bold;*/
		outline: none;
		transition: all 0.5s ease-in;
		-ms-transition: all 0.5s ease-in;  /* para IE */
		-moz-transition: all 0.5s ease-in;  /* para Firefox mozilla */
		-o-transition: all 0.5s ease-in;  /* para Opere */
		-webkit-transition: all 0.5s ease-in;  /* para Crom Safar */
	}
	/*Alterar los inputs si estan vacior o con error */
	/*Campo con error*/
	section#formularario_tipo_3 p {  
		display:inline-block;
		font-size: .8rem;  
		line-height: 1rem;
		padding: .2rem;
		text-align:left;
	}
	/* === Form hints === */  
	section#formularario_tipo_3 .form_hint {  
		background: #d45252;  /* naranja */
		border-radius: .2rem;  
		-moz-border-radius: .2rem;
		-webkit-border-radius: .2rem;  
		color: white;
		display:inline-block;
		font-size: .8rem;  
		margin-left: 1rem;  
		padding: .1rem .6rem;  
	}
	section#formularario_tipo_3 .div_formularario_tipo_3 {
		border-radius: .2rem; /*borde redondeado*/
		-moz-border-radius: .2rem;
		-webkit-border-radius: .2rem;
		font-size: .8rem;  
		padding: .1rem;
		margin-bottom: .1rem;
		margin-top: .1rem;
		text-align:left;
		width: 100%;
	}
	/*Fin formularario_tipo_3*/
/* Fin FORMULARIOS*/
section#lateral, 
section#lateral_2, 
section#lateral_Detalle,
section#lateral_twitter, 
section#principal, 
section#principal_tipo2 {
 	/*	border: double;*/
 	border-radius: .2rem;
 	-moz-border-radius: .2rem;
 	-webkit-border-radius: .2rem;  
 	display:inline-block;
 	padding: .2rem;
 	vertical-align: top;
 	width: 100%;
}
section#lateral {
 	/*height : 46.1rem;*/
 	/*height : 100%;*/
 	vertical-align: top;
 	width: 25%;	
}
/*Igual al lateral solo cambio la altura*/
section#lateral_2 {
 	/*height : 50rem;*/
 	vertical-align: top;
 	width: 25%;	
}
section#lateral_Detalle {
 	/*height : 52rem;*/
 	vertical-align: top;
 	width: 25%;	
}
section#lateral_twitter {
 	height: 92%; 
 	vertical-align: top;
 	width: 10%;	
}
article#descriptiva, 
section#fotosportada,
section#agendadeActividades, 
section#marquesina3{
 	border-radius: .5rem;
 	-moz-border-radius: .5rem;
 	-webkit-border-radius: .5rem;
 	display: block;
 	margin: 0 auto;
 	margin-bottom: 1%;
 	max-width: 100%;
 	padding: .25rem;
 	vertical-align: top;
 	width: 98%;	
}
section#agendadeActividades {
 	height: 31%; 
 	overflow: auto;		
}
section#fotosportada {
 	margin-top: 2%;
}
section#lateral,
section#lateral_2{
 	border-radius: .5rem;
 	-moz-border-radius: .5rem;
 	-webkit-border-radius: .5rem;
 	/*	display: block;*/
 	margin: 0 auto;
 	margin-bottom: .9rem;
 	/*	max-width: 100%;*/
 	/*	max-height : 100%;*/
 	padding: .25rem;
 	vertical-align: top;
 	width: 25%;	
}
section#banner_Marquesina2 {
 	height: 19%;
}
#pie {
 	background-color:#FF6;
 	margin: 0rem 0rem 0em .5rem ;
 	max-width: 95%;
 	padding: .25rem;
 	margin-top: .2rem;
 	width: 95%;
}
section#principal_tipo2 {
 	width: 100%;		
}
/*Tablas td Fondo Amarillo Claro Claro, Borde naranca */
/* Usado en Descriptiva*/
/* Usado en Noticias*/
/* usandose en ColegioDocentes */
#texto_descriptivo_1 {
 	background-color: #FFF;
 	border-color:#F30;
 	border-radius: .0rem;
 	-moz-border-radius: .0rem;
 	-webkit-border-radius: .0rem;
 	border-style: solid;
 	border-width: .1rem;
 	font-size: .8rem;
 	padding-left: .5rem;
 	padding-right: .5rem;
}
/*Efecto en mayúscula primara letra descriptivas <p></p> */
#texto_descriptivo_1 p::first-letter  { 
 	font-size: 175%;
 	color: #8A2BE2;
}
/* Usado para describir el titulo de lo mostrado en la página actual*/
/* usandose en ColegioDocentes  y como titulo en casi todas las páginas*/
#titulo_descriptivo_1 {
 	border-radius: 2rem;
 	border-width: .1rem;
 	font-size: 1.1rem;
 	font-weight: bold ;	
 	max-width: 100%;
 	padding: .5rem;
 	margin-bottom: .5rem;
 	margin-top: .5rem;
 	text-align:center;
}
/*Similar al 1 pero mas modesto en diseño*/
/* usar en titulos ya internos*/
/*usado e: usuaris.asp(registro)*/
#titulo_descriptivo_2 {
 	border-radius: .2rem; /*borde redondeado*/
 	-moz-border-radius: .2rem;
 	-webkit-border-radius: .2rem;
 	font-size: .9rem;
 	font-weight: normal;	
 	max-width: 100%;
 	/*min-width: 70%;*/
 	/*padding: .1rem;*/
 	/*margin-top: .1rem;*/
 	text-align:center;
 	width: 100%;
}
/*-------------------------------------------------*/
/*4) CLASES::Definir los estilos para las clase . class= . */
/*-------------------------------------------------*/
.altoCelda15 { 
 height:1.5rem;
}
/*Llevar el ancho tamaño DE CONTROLES las etiquetas, imput etc..*/
.ancho10porciento 
{ 
 width: 10%;
}
.ancho50porciento 
{ 
 width: 50%;
}
.ancho100porciento { 
 width: 100%;
}
/*AJUSTAR LAS ALTURAS DE LOS CONTROLES*/
/*Intento crear contenido ajustado al tamaño*/
/*aplica a la altura total de las páginas*/
/*aplica al id=contenido*/
.altura_pagina_1 {
 	height: 61rem; 
 	overflow: auto;	
 	width: 98%;		
}
/*en descriptiva del colegio*/
.altura_40 {
 	height: 40%; 
 overflow: auto;	
 width: 98%;		
}
/*en fotos pagina inicial del colegio*/
.altura_30 {
 	height: 30%; 
 	overflow: auto;	
 	/*	width: 98%;		*/
}
/*aplica a id principal y id lateral_detalle */
.altura_principal {
 	height: 92%; 
}
/*aplica a a la altura del twitter */
.altura_92 {
 	height: 92%; 
 	overflow: auto;	
 	width: 98%;		
}
/*Efecto (lupa zoom) de ampliar las imagenes al pasar el mouse por arriba */
/*ajystar luego la velocidad y uso particular*/
.aumenta_imagen img {
	transition: 1.0s;
	-webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
}
.aumenta_imagen img:hover {
 transform: scale(1.5);
 -webkit-transform: scale(2.5);
 -moz-transform: scale(2.5);
 -o-transform: scale(2.5);
 -ms-transform: scale(2.5);
}
/*Usado en la Boleta de primaria Boletin1_2*/
.BoletaPrimaria_Izquierda, 
.BoletaPrimaria_Derecha {
 border-radius: .5rem;
 -moz-border-radius: .5rem;
 -webkit-border-radius: .5rem;
 display:inline-block;
 max-width: 100%;
 padding: .25rem;
 margin-bottom: .5rem;
 margin-top: .5rem;

 text-align: left;
 vertical-align: top;
 width: 95%;
}
.BoletaPrimaria_Izquierda {
 width: 91%;
 text-align: left;
}
.BoletaPrimaria_Derecha {
 width: 3%;
 text-align: center;
}
.BoletaPrimaria_EspaciosEntreCajas {
 margin-bottom: 0rem;
}
/*se usa para la carga de notas*/
.BoletaPrimaria_EspaciosCarga {
 margin-bottom: .1rem;
 margin-top: .1rem;
}
/*esto se usa para mostrar las notas cargadas*/
.BoletaPrimaria_EspaciosMinimos {
 margin-bottom: 0rem;
 margin-top: 0rem;
 padding: 0rem;
}
/*esto se usa para mostrar las notas cargadas*/
.BoletaPrimaria_MuestraCuadroconNota {
 	background:#3C0;/*verde manzana*/
 	border-color: #FFFF00; /* amarillo */
 	border-radius: .2rem;
 	border:double;
 	-moz-border-radius: .2rem;
 	-webkit-border-radius: .2rem;  
 	border-width: .1rem;
 	color:#000;
 	display:inline-block;
 	font-weight: bold ;	
 	margin-bottom: 0rem;
 	margin-left: 1rem;
 	margin-top: 0rem;
 	padding: .3rem;
 	width: 2%;
}
/*esto se usa para mostrar las notas cargadas
es similar al anterior pero usa menos espacio*/
.BoletaPrimaria_MuestraCuadroconNota_1 {
	background:#3C0;/*verde manzana*/
	border-color: #FFFF00; /* amarillo */
	border-radius: .2rem;
	-moz-border-radius: .2rem;
	-webkit-border-radius: .2rem;  
	color:#000;
	display:inline-block;
	font-weight: bold ;	
	margin: 0rem;
	padding: 0rem;
	width: 2%;
}
.BoletaPrimaria_MuestraCuadroconNotaenBlanco {
	background:#F60; /* naranja */
	border:double;
	border-width: .1rem;
	padding: .3rem;
}
/* Fin Boleta de Primaria */
/* Borde redondeado en tablas a mayor pixels mayor la curva redondeada */
.borderedondeado {
	border-radius: .2rem;
	-moz-border-radius: .2rem;
	-webkit-border-radius: .2rem;  
}
/* Botones */
	/* estoy intentado llevar todo al boton_02*/
	.btnBuscar {
		background:#3C0;/*verde manzana*/
		border: .1rem solid;
		border-color: #FFFF00; /* amarillo */
		border-radius: .2rem;
		-moz-border-radius: .2rem;
		-webkit-border-radius: .2rem;
		border-width: .1rem;
		color:#FFFF00;
		display:inline-block;
		font-weight: bold ;	
		margin-bottom: .8rem;
		margin-left:0;
		padding: .0rem;
		padding-bottom: .5rem;
		/*	vertical-align: middle;*/
		vertical-align:top;
		width: 100%;
	}
	.btnTipo_01, 
  .btnTipo_01_Verde,
  .btnTipo_01_Verde_2,
  .btnTipo_02,
  .btnTipo_03,
  .btnTipo_04,
  .btnTipo_05,
  .boton-ir-arriba {
  	background: #FF0; /*Amarillo*/
  	/*  	border: .2rem solid #F90; Naranca*/
  	/*	border: 3px double #FC6; amarillo ocre*/
  	border: .1rem solid #F00; /*rojo*/
  	border-left-color: #FC9;
  	border-top-color: #FC9;
  	border-radius: .2rem;
  	-moz-border-radius: .2rem;
  	-webkit-border-radius: .2rem;
  	color: #900;
  	cursor: pointer;
  	/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
  	font-size: .5rem;
  	margin: .1rem auto .1rem auto;
  	/*margin-top: .1rem;*/
  }
  .btnTipo_01, 
  .btnTipo_01_Verde,
  .btnTipo_01_Verde_2  {
  	height: 2.2rem;
  	width: 5rem;
  }
  .btnTipo_01:hover,
  .btnTipo_01_Verde:hover,
  .btnTipo_01_Verde_2:hover,
  .btnTipo_02:hover,
  .btnTipo_03:hover,
  .btnTipo_04:hover,
  .boton-ir-arriba:hover{
  	color: #FFF;
  	background: #900; /* Rojo Ladrillo */
  	border-color: #F00 #C30 #C30 #F00;/*rojo, otro rojo,*/
  	border: .1rem solid;
  	border-radius: .2rem;
  	-moz-border-radius: .2rem;
  	-webkit-border-radius: .2rem;
  	transition: all 0.5s ease-in;
  	-ms-transition: all 0.5s ease-in;
  	-moz-transition: all 0.5s ease-in;
  	-o-transition: all 0.5s ease-in;
  	-webkit-transition: all 0.5s ease-in;
  }
  .btnTipo_01_Verde:hover,
  .btnTipo_01_Verde_2:hover,
  .btnTipo_05:hover {
  	background: #3C0;/*verde manzana*/
  	/*background: #47FF0A; verde manzana mas claro*/
  }
  .btnTipo_01_Verde_2 {
  	/*se usa en cargar nominas exel manual en pagina*/
  	/* en botones de parametros*/
  	margin:1rem 1rem 1rem 1rem;
  	padding: .2rem;
  	width:9rem;
  }
  .btnTipo_02,
  .btnTipo_03 {
  	/*
		dejo tamaño sin fijar q se ajuste
		max-width: 20rem;Cambie de 10 a 20 LO PASO A 15 SALEN MUY GRANDE EN NOTAS PARCIASLE  por borones de nominas de primaria preescolar*/
		min-width: 5rem;
		padding: .1rem;
		/*Ver todos los botones de enlace de igual tamaño*/
		/*width: 10rem;*/
	}
	/*Dar largo mayor a los botones usa pagina WebMasterEduRed1*/
	.btnTipo_04 {
		background: #FFF; /*Blanco*/
		border: 3.5px solid;	
		border-color:#F90; /*naranja*/
		font-size: 1rem;
		margin: .5rem;	
		padding: .2rem;
		font-weight:bold;
		width: 80%;
	}
	.btnTipo_05 {
		/*SE USA BOTONES SUBIR FOTO PLANILLA MAS PEQUEÑO QUE EL 02, MENU PRIMARIA BACHILLERATO*/
		width: 12rem; /*10*/
	}
	.btnTipo_02:hover,
	.btnTipo_03:hover,
	.btnTipo_04:hover,
	.boton-ir-arriba:hover{
		/*background: #F90; naranja*/
		background: #3C0;/*verde manzana*/
	}
	.btnTipo_01:active,
	.btnTipo_01_Verde:active,
	.btnTipo_01_Verde_2:active,
	.btnTipo_02:active,
	.btnTipo_03:active,
	.btnTipo_04:active{
		font-size: .45rem;
		font-weight: bold;
		/* Movemos ligeramente el botón hacia abajo */
		position: relative;
		top: 5px;
		text-shadow: black 0.3em 0.3em 0.4em;
	}
		/*Ajusta tamaño botones notas parciales*/
		/*Lo usa Boton_Enlace_04_2*/
		.btnTipo_Ancho_15{
			max-width: 15rem;
		}
		.boton-ir-arriba {
			border: .1rem solid #F00; /*rojo*/
			color:#000;
			display:none;
			padding:.5rem;
			/*background:#024959;*/
			/*font-size:20px;*/
			cursor:pointer;
			position: fixed;
			bottom:2rem;
			right:5%;
		}
  /* Fin Botones */
/* Botones Bootstrap */
  /* Usado en IniciarSessio.asp */
/* Efecto neón en botones y enlaces */
    /* https://www.youtube.com/watch?v=tOadTZoqjEM */
    .btn-neon{
      position: relative;
      display: inline-block;
      /*padding: 15px 30px;*/
      /*letter-spacing: 4px;*/
      text-decoration: none;
      /*font-size: 24px;*/
      overflow: hidden;
      transition: 0.1s;
    }
    .btn-neon:hover{
      background: #fff;
      box-shadow: 0 0 10px #a945c7, 0 0 40px #a945c7, 0 0 80px #a945c7;
      transition-delay: 0.5s;
    }
    .btn-neon span{
      position: absolute;
      display: block;
    }
    #span1{
      top: 0;
      left: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent,#a945c7);
    }
    .btn-neon:hover #span1{
      left: 100%;
      transition: 1s;
    }
    #span3{
      bottom: 0;
      right: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(270deg, transparent,#a945c7);
    }
    .btn-neon:hover #span3{
      right: 100%;
      transition: 1s;
      transition-delay: 0.5s;
    }
    #span2{
      top: -100%;
      right: 0;
      width: 2px;
      height: 100%;
      background: linear-gradient(180deg,transparent,#a945c7);
    }
    .btn-neon:hover #span2{
      top: 100%;
      transition: 1s;
      transition-delay: 0.25s;
    }
    #span4{
      bottom: -100%;
      left: 0;
      width: 2px;
      height: 100%;
      background: linear-gradient(360deg,transparent,#a945c7);
    }
    .btn-neon:hover #span4{
      bottom: 100%;
      transition: 1s;
      transition-delay: 0.75s;
    }
  /* Fin Efecto neon en botones*/
  /*** ESTILOS BOTÓN GROW BOX Efecto boton desde centro crece ***/
  .ov-btn-grow-box {
    /*background: #0ff;  color de fondo */
    /*color: #4741d7;  color de fuente */
    border: 2px solid #4741d7;  /*tamaño y color de borde */
		/*border-radius: 3px;*/ /* redondear bordes */
    display: inline-block;
		font-size: 0.7rem;
    overflow: hidden;
    padding: 6px 10px;
    position: relative;
    z-index: 1;
  }
  .ov-btn-grow-box:hover {
    color: #fff;/* color de fuente hover */
  }
  .ov-btn-grow-box::after {
    background: #041CB9; /* color de fondo hover */
    content: "";
    display: block;
		font-size: 0.7rem;
    left: 0;
		padding: 6px 10px;
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(0, 0);
    transition: all 0.3s ease;
    z-index: -1;
  }
  .ov-btn-grow-box:hover::after {
    transition: all 0.3s ease-out;
    transform: scale(1, 1);
  } 
  /*** FIN ESTILOS BOTÓN GROW BOX ***/
/* Fin Botones Bootstrap */
/*	Color de fondo neutro, puede ser blanco o beige clarito para superficies muy grandes*/
  .Color_Fondo_Neutro {
  	background-color: #FFFFFF;/*Blanco*/	
  }
  .Color_Fondo_Neutro_1 {
  	background-color: #FFC; /*beige claritp*/
  }
  .Color_Fondo_Neutro_2 {
  	background-color: #FFCC00; /*Amarillo Ocre*/
  }
  .Color_Fondo_Neutro_3 {
  	background-color: #FF6; /*Amarillo*/
  }
  .Color_Fondo_Neutro_4 {
  	background-color: #FF9933; /*Naranja palido Para Alertas o resaltados*/
		/*
		Se pone muy ancho para dispositivos
		font-weight:bold;
		text-decoration:blink;
		text-shadow:0px 1px 0px #b23e35;
		*/
	}
.Color_Fondo_Neutro_5 {
	background-color: #80FF00;/*verde manzana Para Alertas o resaltados*/
	font-weight:bold;
	padding:.5rem;
	text-decoration:blink;
	text-shadow:0px 1px 0px #b23e35;
}
.Color_Fondo_Neutro_5_1 {
	background-color: #80FF00;/*verde manzana Para Alertas o resaltados*/
}
.Color_Fondo_Neutro_6 {
	background-color: #CC6600; /*Rojo Ladrillo*/
}
.Color_Fondo_Neutro_7 {
	background-color: #FFB6C1; /*Rosa Claro*/
}
/*Para la Descriptiva; ejemplo la del colegio*/
.descriptiva_1  {
	height: 21.9rem; 
	overflow: auto;	
	padding: .1rem .7rem;
}
/*Usa pagina inicial de EduDatos cambiar por altura ya definidas arriba*/
/*esto solo lo esta usando paginas de la raiz webmaster...*/
.descriptiva_1_Ajusta_Alto_1 {
	height: 28rem; 
}
/*esto solo lo esta usando paginas de la raiz webmaster...*/
.descriptiva_1_Ajusta_Alto_2 {
	height:auto;
}
/*Usado en la cabnecera donde aparece foto y datos del alumno ejem:DatosdelAlumno*/
.DosColumnas_Izquierda, 
.DosColumnas_Derecha, 
.DosColumnas_Mayor_Altura_1,
.TresColumnas_Izquierda, 
.TresColumnas_Centro, 
.TresColumnas_Derecha {
	border-radius: .2rem;
	-moz-border-radius: .2rem;
	-webkit-border-radius: .2rem;
	display:inline-block;
	font-size: .8rem;
	height: 9.8rem;
	max-width: 100%;
	padding: .25rem;
	margin-bottom: 1.2rem;
	margin-top: .7rem;
	text-align: left;
	vertical-align: top;
	width: 80%;
}
.DosColumnas_Izquierda {
	width: 23%;
	text-align: right;
}
.DosColumnas_Mayor_Altura_1 {
	font-size: 0.55rem;
	height: 18rem;
}
.TresColumnas_Centro {
	display:inline-block;
	font-size: .7rem;
	height: 9.8rem;
	text-align: left;
	width: 50%;
}
.TresColumnas_Derecha {
	display:inline-block;
	text-align: right;
	width: 23%;
}
/*Efectos de opacidad y transicion en la cabecera */
.fade {
	opacity: 1;
	filter: alpha(opacity=10);
	-ms-transition: all 0.5s ease-in;  /* para IE */
	-moz-transition: all 0.5s ease-in;  /* para Firefox mozilla */
	-o-transition: all 0.5s ease-in;  /* para Opere */
	-webkit-transition: all 0.5s ease-in;  /* para Crom Safar */
	transition: all 0.5s ease-in;
}
/* Efecto de opacidad al pasar el mouse*/
.fade:hover {
	-ms-transition: all 0.5s ease-out;  /* para IE */
	-moz-transition: all 0.5s ease-out;  /* para Firefox mozilla */
	-o-transition: all 0.5s ease-out;  /* para Opere */
	-webkit-transition: all 0.5s ease-out;  /* para Crom Safar */
	transition: all 0.5s ease-out;	
	opacity: 0.6;
	filter: alpha(opacity=7);
}
/* Letras Tamaños y estilos para las letras  */
/*Tamañ normal */
.Letra_Normal {
	font-size: 1rem;
	text-decoration: none;
}
.Letra_Pequena {
	font-size: .75rem;
	text-decoration: none;
}
.Letra_Pequenita {
	font-size: .6rem;
	text-decoration: none;
}
.Letra_Grande {
	font-size: 1.5rem;
	text-decoration: none;
}
.Letra_Negrita {
	font-weight: bold;
}
.Letra_Padding_1 {
	padding: .25rem;
}
/*Letras con caracteres del mismo tamaño i w*/
.Letra_MonoEspaciado {
	font-family:"Courier New", Courier, monospace;
}
/* Fin Letras tamaño y estilo */

/*Marco para Imegenes */
/*Usado en: DatosdelAlumno:FotodelAlumno*/
.Marco_Imagen_1 {
	/*	background: #FF0000;  rojo */
	border: solid;
	border-color: #FFFF00; /* amarillo */
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;
	border-width: .5rem;
	color:#FFFF00;
	display:inline-block;
	margin: 0 auto;
	max-width: 95%;
	padding: .1rem;
}
.Marco_Imagen_2 {
	border: solid;
	border-color: #FFFF00; /* amarillo */
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;
	border-width: .2rem;
	color:#FFFF00;
	display:inline-block;
	margin: 0 auto;
	padding: .1rem;
}	
/*usado en el menu*/
.Marco_Imagen_3 {
	border: solid;
	border-color: #FFFF00; /* amarillo */
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;
	border-width: .5rem;
	color:#FFFF00;
	display:inline-block;
	margin: 0 auto;
	width: 90px; 
}
/* Mensajes de Alerta e Informativos */
/* Alertar o error grande rojo y amarillo usado en: */
/* login1 para error de login; planiilladecontactoingresa para error en datos incompletos */
.Mensaje_Alerta_1, 
.Mensaje_Alerta_2,
.Mensaje_Alerta_3,
.Mensaje_Alerta_4 {
	/*background: #FF0000;  rojo */
	border: double;
	border-color: #FFFF00; /* amarillo */
	border-radius: .2rem;
	-moz-border-radius: .2rem;
	-webkit-border-radius: .2rem;
	border-width: .2rem;
	color:#000;
	display:inline-block;
	font-size: 1.5rem;
	/*max-width: 95%;*/
	padding: .25rem;
	vertical-align: middle;
	/*width: 95%;*/
}
/*Usado en error de registro de usuario ColegioUsuarioIngresa*/
.Mensaje_Alerta_2 {
	background-color:#FFC; /*amarillo clarito*/
	border-color: #FF0000; /* rojo */
	color:#000000;
	font-size: 1rem;
	text-align: center;
}
/*Verde igual a los anteriore Usado por ejemplo
en mensaje insertado en libro de visitas*/
.Mensaje_Alerta_3 {
	background-color:#00FF33; /*Verde*/
	border-color:green; 
	color:green;
	font-size: 1rem;
	text-align: center;
}
/*especial de mensajes EduRed
por ejemplo no lleno planilla de Datos*/
.Mensaje_Alerta_4 {
	/*background-color:#FFD700; Verde Clarito*/
	background-color:#FFF; 
	border-color: orange; 
	color:black;
	font-size: .8rem;
	margin: 1rem 0 1rem 0;
	text-align: left;
}
/* Mensajes Informativos*/
/* usado en: DatosdelAlumno */
.Mensaje_Informacion_1 {
	border-width: .2rem;
	border-radius: .2rem;
	-moz-border-radius: .2rem;
	-webkit-border-radius: .2rem;
	display:inline-block;
	/*	font-size: .7rem;*/
	margin-bottom: 0.1rem;
	margin-top: .1rem;
	/*max-width: 95%;*/
	overflow: auto;	
	padding: .2rem;
	text-align:center;
	vertical-align: middle;
	width: 100%;
}
.Mensaje_Informacion_1_Alinea_I {
	text-align:left;
}
.Mensaje_Informacion_1_Alinea_J {
	text-align:justify;
}
/*Usado en titulos de las informaciones a la comunidad*/
/*NO LO USA NADIE 20240903*/
.Mensaje_Informacion_2 {
	background-color: #FFCC00; /*Amarillo Ocre*/
	border: .2rem solid;	 
	border-color: #F90; /* amarillo */
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;  
	/*color: #F90;  color de la fuente naranja */
	/*font-family:  Verdana, "Pecita",Helvetica; Fuentes seguras van sin comillas por ser naturales de tosos los navegadores */
	font-size: .8rem;
	font-weight: bold;
	margin-bottom: .5rem;
	padding-left: .5rem;
	width: 95%;
}
/* Fin de Mensajes de Alerta e Informativos */
/* Probar en Procesar AreasMostrar imagen de carga mienbtras se caraga una pagina */
/*Cargando la página*/
.precarga {
	background: url('../imagenes6/Cargando_2.gif') left center no-repeat;
	/*    background:transparent url(../imagenes6/Cargando_2.gif) center no-repeat;*/
}
/*Forzar a aparecer el scroll horizontal por ls mobiles*/
.scrollHorizontal {
	overflow-x: auto;
	white-space: nowrap;
}
/*Mostrar foto redondeada*/
/*Ejemplo;: Alumno*/
.avatar {
	/* cambia estos dos valores para definir el tamaño de tu círculo */
   /* height: 100px;
   width: 100px;*/
   height: 128px;
   width: 112px;
   /* los siguientes valores son independientes del tamaño del círculo */
   background-repeat: no-repeat;
   background-position: 50%;
   border-radius: 50%;
   background-size: 100% auto;
   border:1px solid #666;
 }
 .avatar_t1 {
 	border:.1px solid #666;
 	height: 3rem;
 	width: 2.8rem;
 }	
 .avatar_t2 {
 	border:.1px solid #666;
 	height: 2.5rem;
 	width: 2.3rem;
 }	
/*Ajustes especiales de imagenes tamaño*/
/*se usa en Tope_001_H5*/
.tamano_cabecera_01 {
	height:200px;
}
.tamano_escudo_01 {
	height:200px;
	width:150px;
}
/*Se usa en pagina inicial de edudatos*/
.tamano_escudo_02 {
	height:75px;
	width:70px;
}
/* Grafico de barras  con CSS http://www.cssblog.es/barras-graficas-con-css/*/
.graph {
	border: .3rem solid #B1D632;
	background: #FF9;
	padding: 2px;
	position: relative; 
	width: 200px;
}
.graph .bar {
	background: #B1D632;
	color: #333;
	display: block;
	height: 1rem;
	position: relative;
	line-height: 1rem;
	text-align: center;
}
.graph .bar span { 
	left: 1em; 
	position: absolute;
}
/*Fin tipo de grafico*/
/*Otro tipo de grafico 2 Usado en boleta de bachillerato*/
/*http://codepen.io/omascaros/pen/meJuG*/
/* da error al verificarlo con lint pero funciona
el detalle es q los imports deben ir al inicio
pero no se que hacer con las variables*/
@import "lesshat";
/* Mixings &  Variables */
@barHeight: 20px;
@borders: #717D95;
@primary: #59BAC0;
	.transition (@property) {
	-webkit-transition: @property;
	-moz-transition: @property;
	-o-transition: @property;
	transition: @property 
}
.transform(@degree) {
	transform:rotate(@degree);
	-ms-transform:rotate(@degree);
	-webkit-transform:rotate(@degree); 
}

.grafico-barras {
	height: auto;
	margin: .2rem .2rem .2rem .2rem;
	position: relative;
	/*width: 80%;
	width: 65%;*/
}
.barra-fondo {
	background: #DAE4EB;
	border: 1px solid;	 
	border-radius: 0.5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;  
	display: block;
	margin-bottom: 0rem;
}
.barras {  
	background-color: cyan;    
	border: 1px solid;	 
	border-radius: 0.5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;  
	transition:(all 1s ease-out);
	cursor: pointer;
	display: block;
	height: 2rem;  
	margin-bottom: 0rem;
	padding-left: .5rem;
	position: relative;
	text-align:center;
	z-index: 9999;
	width: 0%;         
	&:hover {
		.transition(all 0.5s ease);
	}    
	&:last-child {
		margin-bottom: 0;
	}
	&:after {
		position: absolute;
		content: attr(data-value);
		display: none;
		font-size: 12px;
		border-radius: 4px;
		background: rgba(0,0,0,0.5);
		color: #fff;      
		padding: 0 10px;
		margin-left: 5px;
		left: 100%;
		top: 0;
	}
	&:hover:after {
		display: block;
	}  
	&-legend {
		position: absolute;
		margin-right: 10px;
		left: -40px ;
		z-index: 9999;
	}
}
/* Fin Otro tipo de grafico 2*/
/* Fin Graficos de barras CSS */
/* Ocultar etiquetas hits o opciones q 
por programacion no se meuestran pero tienen q estar
ejemplo en ColegioDepositoBancario */
.ocultar {
	visibility:hidden;
}
/*Dar forma a tablas filas y columnas*/
.tabla_tipo1 {
	width:95%;
}
.tabla_tipo1 caption {
	margin-bottom:.5rem; 
	height: 1rem; 
}
.tabla_tipo1 td { 
	border :1px solid #ccc; /*gris*/
	width: 50%; /*Aquí va el ancho de la Celda*/
	height: .7rem; /*Aquí el Alto*/
}
.tabla_tipo1 td:hover {
	background: #e0e0e0;
	color: #000;
}
.tabla_tipo1 th { 
	border :8px solid #ccc; 
	/*width: 50%; Aquí va el ancho de la Celda*/
	height: .5rem; /*Aquí el Alto*/
}
/*Realiza transpariencia deja ver el fondo*/
.transparente_80 {
	opacity: 0.8;
	filter:  alpha(opacity=80);
}
/* ProgressBar de jQueryUI*/
.ui-progressbar {
	position: relative;
}
.progress-label {
	color:#FFF;
	font-weight: bold;
	left: 50%;
	position: absolute;
	text-shadow: 1px 1px 0 #000;
	top: 4px;
}
/* Fin ProgressBar de jQueryUI */
/* Efectos */
/*Blinking*/
.blink_me {
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	-moz-animation-name: blinker;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

	animation-name: blinker;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@-moz-keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}
@keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}
/*Fin Blinking*/
/*Reflejo sin probar */
.reflejo {
	margin: 25px;
	opacity: 0.8;
	border: 10px solid #eee;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
.reflejo:hover {
	opacity: 1;
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
	-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
	-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
	box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
/* Fin Efectos */
/* Animaciones */
/* Efecto de girar y aumentar usado en el escudo */
@keyframes girar { 
	0% { 
		transform: rotate3d(0,0,0,0deg) scale(0,0); 
	} 
	100% { 
		transform: rotate3d(1,1,1,360deg) scale(1,1);   
	} 
} 
@-moz-keyframes girar {  /* Firefox */ 
	0% { 
		/*-moz-transform: rotate3d(0,0,0,0deg) scale(0,0); NO HACE 3D*/ 
		-moz-transform: rotate(0deg) scale(0,0); 
	} 
	100% { 
		/*-moz-transform: rotate3d(1,1,1,360deg) scale(1,1); NO HACE 3D*/  
		-moz-transform: rotate(360deg) scale(1,1); 
	} 
}
@-webkit-keyframes girar { /* Safari and Chrome ; Safari no rota 3d*/ 
	0% { 
		-webkit-transform: rotate3d(0,0,0,0deg) scale(0,0); 
	} 
	100% { 
		-webkit-transform: rotate3d(1,1,1,360deg) scale(1,1); 
	} 
} 
@-o-keyframes girar { /* para cuando ópera... */
	0% { 
		-o-transform: rotate3d(0,0,0,0deg) scale(0,0);  
	} 
	100% { 
		-o-transform: rotate3d(1,1,1,360deg) scale(1,1); 
	} 
} 
/* Lo usa el escudo */
.rueda1 { 
	animation: girar 5s 1; 
	-moz-animation: girar 5s 1; /* Firefox */ 
	-webkit-animation: girar 5s 1; /* Safari and Chrome */ 
	-o-animation: girar 5s 1; /* para cuando ópera... */ 
	-ms-animation: girar 5s 1; /* para cuando ie... */ 
}
/* Fin Efecto de girar y aumentar usado en el escudo */ 
/* Usando keyframes*/
/* Efecto de aumentar usado en nombre del colegio */
@keyframes aumentar_1 { 
	0% { 
		transform: scale(0,0);  
	} 
	100% { 
		transform: scale(1,1);   
	} 
} 
@-moz-keyframes aumentar_1 {  /* Firefox */ 
	0% { 
		-moz-transform: scale(0,0); 
	} 
	100% { 
		-moz-transform: scale(1,1);  
	} 
}
@-webkit-keyframes aumentar_1 { /* Safari and Chrome ; Safari no rota 3d*/ 
	0% { 
		-webkit-transform: scale(0,0); 
	} 
	100% { 
		-webkit-transform: scale(1,1); 
	} 
} 
@-o-keyframes aumentar_1 { /* para cuando ópera... */
	0% { 
		-o-transform: scale(0,0);  
	} 
	100% { 
		-o-transform:  scale(1,1); 
	} 
} 
/* Invoca el keyframe*/
.aumentar_cabecera { 
	animation: aumentar_1 5s 1; 
	-moz-animation: aumentar_1 5s 1; /* Firefox */ 
	-webkit-animation: aumentar_1 5s 1; /* Safari and Chrome */ 
	-o-animation: aumentar_1 50s 1; /* para cuando ópera... */ 
	-ms-animation: aumentar_1 5s 1; /* para cuando ie... */ 
}
/* Fin Efecto aumentar usado en el escudo */ 
/*Mover de derecha a izquierda cabecera*/
@keyframes mover { 
	0% {
		left: 20%;		 
	} 
	100% { 
		left: 0%;		 
	} 
}
@-moz-keyframes mover {  /* Firefox */ 
	0% {
		left: 20%;		 
	} 
	100% { 
		left: 0%;		 
	} 
}
@-webkit-keyframes mover { /* Safari and Chrome ; Safari no rota 3d*/ 
	0% {
		left: 20%;		 
	} 
	100% { 
		left: 0%;		 
	} 
}
@-o-keyframes mover { /* para cuando ópera... */
	0% {
		left: 20%;		 
	} 
	100% { 
		left: 0%;		 
	} 
} 
.mover_cabecera { 
	position: relative;
	animation: mover 5s 1; 
	-moz-animation: mover 5s 1; /* Firefox */ 
	-webkit-animation: mover 5s 1; /* Safari and Chrome */ 
	-o-animation: mover 5s 1; /* para cuando ópera... */ 
	-ms-animation: mover 5s 1; /* para cuando ie... */ 
}
/* PROGRESS BAR solo se ve en fire fox por ahora */
/* http://www.miguelkiko.com/css3slideshow.html#introduccion */
/* Revisar ejemplos completo de slider en esa pagina*/
/* ANIMATION BAR */
/* PROGRESS BAR */
@keyframes fullexpand {
	/* In these keyframes, the progress-bar is stationary */
	0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
	/* In these keyframes, the progress-bar starts to come alive */
	4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
	/* In these keyframes, the progress-bar moves forward for 3 seconds */
	16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
	/* In these keyframes, the progress-bar has finished his path */
	17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
	/* In these keyframes, the progress-bar will disappear and then resume the cycle */
	18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}
.progress-bar { 
	position: relative;
	top: -5px;
	width: 85%; 
	height: .5rem;
	background: #000;
	animation: fullexpand 25s ease-out infinite;
}
/*Efecto chicle */
@-moz-keyframes aumentar_1 {
	30% {
		-moz-transform: scaleX(1.25) scaleY(0.75);
	}
	40% {
		-moz-transform: scaleX(0.75) scaleY(1.25);
	}
	60% {
		-moz-transform: scaleX(1.15) scaleY(0.85);
	}
}
@-webkit-keyframes chicle {
	30% {
		-webkit-transform: scaleX(1.25) scaleY(0.75);
	}
	40% {
		-webkit-transform: scaleX(0.75) scaleY(1.25);
	}
	60% {
		-webkit-transform: scaleX(1.15) scaleY(0.85);
	}
}
.caja_animada:hover{
	animation: 2s chicle 1; 
	-moz-animation: 2s chicle 1; /* Firefox */ 
	-webkit-animation: 2s chicle 1;
	-o-animation: 2s chicle 1; /* para cuando ópera... */ 
	-ms-animation: 2s chicle 1; /* para cuando ie... */ 
}
/*Otro efecto de Balanceo */
@-moz-keyframes balanceo {
	20% {
		-moz-transform: scale(0.9) rotate(-3deg);
	}
	30%, 50%, 70%, 90% {
		-moz-transform: scale(1.1) rotate(3deg);
	}
	40%, 60%, 80% {
		-moz-transform: scale(1.1) rotate(-3deg);
	}
}
.caja_animada_balanceo1:hover {
	-moz-animation: 2s balanceo 1;
}
/*SlideShow de imagenes con CSS3 :: REVISAR la progressbar pertenece aca*/
/*http://www.miguelkiko.com/css3slideshow.html#introduccion*/
/* Fin Animaciones */
/* Fin keyframes */
/* Para Imprimir y lograr salto de pagina
http://www.desarrolloweb.com/articulos/saltos-pagina-imprimir-css.html*/
/* Para logrrar ee salto colocamos se coloca codigo en Print.css
<div class="saltopagina"></div>*/
@media all {
	div.saltopagina	{
		display: none;
	}
}
/* Fin Para Imprimir y lograr salto de pagina*/

******************************/
/* Medias Querys: Son condcionales de CSS para Response Design */
/*  si es tamaño de la pagina ancho es < 1081 */
/*  screen media  aplica a las salidas de pantall */
/******************************/
/* Esquema de tamaños por dispositivos*/
/* Esquema DreamWeaver (boton Multimedia arriba)*/
/* 240 x 320 Teléfono de baja gama*/
@media only screen
and (min-width : 240px) 
and (max-width : 320px) {
	/* STYLES GO HERE */ 
}
/* 320 x 480 SmartPhone*/
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
	/* STYLES GO HERE */ 
}
/* 480 x 800 SmartPhone*/
@media only screen 
and (min-width : 480px) 
and (max-width : 800px) {
	/* STYLES GO HERE */ 
}
/* 768 x 1024 Table*/
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) {
	/* STYLES GO HERE */ 
}
/* Fin Esquema DreamWeaver (boton Multimedia arriba)*/

/* Smartphones (vertical(portrait) and horizonta(landscape)l) ----------- */
@media only screen 
and (min-width : 320px) 
and (max-width : 481px) {
	* {
		font-size: .9rem;
	}
	div#area_texto,
	div#area_nota
	{
		display: inline-block;
		width:75%;		
	}
	div#area_nota
	{
		width:10%;		
	}
	section#formularario_tipo_1 form 
	{	
		box-shadow:none;
		clear: left;
	}
	section#formularario_tipo_1 .comboTamano2
	{
		width: 25%;
	}
	section#principal {
		margin-bottom: 0.2em;
	}
	section#principal, 
	section#lateral,
	section#lateral_Detalle,
	section#lateral_twitter
	{
		display: block;
		width: 98%;
	}
	section#principal 
	{
		display: none;
	}
/* Trabajando Tablas, ayuda jQuryMobile
usado en las Nominas de Notas Excel ver todas*/
	table	{ 	
		font-size:.5rem;
		max-width:100%;
	}
	table#Tabla_Ancho_1	{ 	
		width:100%;
	}
	.table#ListadeNominas	{ 	
		width:100%;
	}
	/*Ocultar columnas en tabla Nominas de Notas */
	table#ListadeNominas th#th1,
	table#ListadeNominas td#td1,
	table#ListadeNominas th#th5,
	table#ListadeNominas td#td5,
	table#ListadeNominas th#th6,
	table#ListadeNominas td#td6	{ 	
		display: none;
	}
	/* Barra scroll con bootstrap 4*/
	.table-responsive::-webkit-scrollbar {
		-webkit-appearance: none;
	}
	.table-responsive::-webkit-scrollbar:vertical {
		width: 22px;
	}
	.table-responsive::-webkit-scrollbar:horizontal {
		height: 22px;
	}
	.table-responsive::-webkit-scrollbar-thumb {
		background-color: rgba(0, 0, 0, .5);
	  border-radius: 10px;
	  border: 2px solid #ffffff;
	}
	.table-responsive::-webkit-scrollbar-track {
		border-radius: 10px;  
	  background-color: #ffffff; 
	}
	/* Fin Barra scroll con bootstrap 4*/
	/* Fin Tablas*/
	.DosColumnas_Izquierda {
		height: 9rem;
		text-align: right;
		width: 21%;
	}
	.TresColumnas_Centro {
		font-size: .7rem;
		height: 11rem;
	}
	.avatar {
 		height: 6rem;
 		width: 5.8rem;
	}
	input#txtasunto 
	{
		font-size: .5rem;
		width: 85%;
	}
}