@font-face {
	  font-family: 'OpenSans-regular';
	  src:  url('fonts/opsans-regular.ttf') format('truetype'), url('fonts/opsans-regular.woff2') format('woff2');
	}

/* MENSAJE OLD BROWSER IE 9 >.................................................................................................................... */
#Mensajes { position:relative; padding: 100px 0; width: 100%; text-align:center; background-color:#ccc; font-family:Arial, Helvetica, sans-serif !important;}
    #CuerpoMensaje { width:600px; padding:20px 0; margin:0 auto; background-color:#fff;}
    #CuerpoMensaje p#AlertaPrincipal { font-style:italic; font-weight:normal; color: #666; font-size:20px; display:block; margin-bottom:15px; text-align:center;}
    #CuerpoMensaje div { width:100%;  border-top:1px solid #ccc; text-align:left;}
    #CuerpoMensaje div p { width:100%; font-size:11px; color:#666; display:block; text-align:center; margin:10px 0;}
    #CuerpoMensaje ul { display: block; list-style:none; width:260px; text-align:center; margin:10px 0 0 180px; }
    #CuerpoMensaje ul li { display: inline-block; vertical-align: middle; margin: 0 auto;}
    #CuerpoMensaje ul li a { width:60px; margin:0 10px; display:block; text-decoration:none; font-size:12px; color:#666;}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* GLOBAL////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ORIENTACION HORIZONTAL////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen {

a { text-decoration:none !important; }
a, figure, img { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

input[type="text"], input[type="email"], input[type="tel"], input[type="checkbox"], input[type="submit"], textarea, button {
	-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0;
}

/*LOADER*/
#Loader { -webkit-transition: opacity 0.3s ease-out, visibility 0.3s ease-out; transition: opacity 0.3s ease-out, visibility 0.3s ease-out; }
#Loader.off { opacity:0; visibility:hidden; }

/* 1 - SETEOS GLOBALES.................................................................................................................... */
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
html, body { height:100%;}
html { font-size:18px  /*1rem = 18px*/ }

body {
    margin:0 auto;
    text-align:center;
  }

.Viewport { position:relative; width:100%; max-width:1600px; height:100%;  margin:0 auto;}
.container {width: 1600px !important; padding-left: 0; padding-right: 0;}

/*botones*/
.amarillo { font:normal 1.2rem "CHANEWEI", Helvetica, Arial, sans-serif; color: #fff; border-radius: 5px !important; padding: 10px 20px; text-align: center; background-color: #FDD306;}

.gris-outline { font-size: 0.8rem; color: #111111; padding:5px; border:1px solid #BBBBBB; border-radius: 5px;}
.gris-outline.icono { padding-left: 25px;}


/*Destkop*/
a:focus { color: #fff;}
.Desktop .amarillo:hover {color: #FDD306; background-color: #5F6C6C;}
.Desktop .gris-outline:hover{ border-color:#000; color: #000 !important;}
/*.....*/

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*CENTER..................................................................................................................................*/
main { width:100%; text-align:left; font-family: "OpenSans-regular", Helvetica, Arial, sans-serif;}
main * {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:none; box-sizing: border-box;}

/*INGRESO - HOME::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*main*/
main#Ingreso {}
	#SlideGeneral { position:relative; overflow: hidden; width:100%; height: calc(100vh - 265px); max-height: 640px; min-height: 500px;}
            #OverlaySlide { position: absolute; z-index: 500; top: 0; left: 0; width: 100%; height: 100%; background: rgba(52 ,52 ,52, 0.6);}

		p#TituloIngreso { position: absolute; z-index: 1000; bottom: 70px; left: calc((100% - 1600px)/2); padding-top: 5px; font:normal 4rem "CHANEWEI", Helvetica, Arial, sans-serif; line-height: 1.3em !important; color: #fff; text-shadow: 0 0 2px #000;}
		p#TituloIngreso span { display: block; font-size: 6rem;}

		#ContentSlideGeneral { position:relative; text-align:left}

			#ContentSlideGeneral div { position: absolute; width:100%; opacity: 0; visibility:hidden;
											-webkit-transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
											transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;}

				#ContentSlideGeneral figure {width:100%;}
					#ContentSlideGeneral img { max-width:100%; display:block;}

		#BulletsSlideGeneral { position:absolute; z-index:50; width:100%; left:0; bottom:40px; text-align:center;}
			#BulletsSlideGeneral ul { list-style:none; margin:0 auto;}
			#BulletsSlideGeneral li { display:inline-block; vertical-align:middle; width:10px; height:10px; margin:0 7px; border-radius: 50%;  background-color: #ccc;  cursor:pointer;
									-webkit-transition: color 0.5s ease-in-out;
									transition: color 0.5s ease-in-out;}
				/*select*/
				#ContentSlideGeneral div.select { opacity: 1; visibility: visible;}
				#BulletsSlideGeneral li.select { background-color:#FDD306; cursor:default;}
				/*......*/

		#BurbujaIngreso { text-align: center; padding: 30px; background-color: #fff;}
			p#TituloIngresoMobile { display: none;}
			p#IntroIngreso { display: block; text-align: center; font-size: 1.5rem; color: #333333; padding-bottom: 30px;}
			a#BtnIngresar { display: inline-block; margin: 0 auto;}

/*footer*/
#ba-footer { margin: 0;}
	#ContentLogoFooter { text-align: right;}
		.container-ba img { width: 200px; margin-left: auto;}

	#ContentPlataforma { font-size: 0; text-align: left; padding-top: 5px;}
		#ContentPlataforma p,
		#ContentPlataforma a,
		#ContentPlataforma address { display: block; font-size: 0.8rem; color: #fff; margin: 0; padding: 0;}

		#ContentPlataforma h3 { margin-top: 0;}

		#DataPlataforma { display: inline-block; vertical-align: top; text-align: left;}
		#ContactoPlataforma {display: inline-block; vertical-align: top; text-align: left; padding-left: 30px;}
		#ContactoPlataforma p strong {font-size: 1.2em; display: block; margin-bottom: 5px;}

/*BIENVENIDA GENERAL:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*main*/
#Bienvenido div.General { padding: 130px 0;}
	#IntroSector { display: block; margin-bottom: 30px; text-align: center; color: #161616; font-size: 1.3rem;}

	#Bienvenido main h1 { text-align: center; display: block; margin-bottom: 20px;}

	#AccesosSector { width: 100%; max-width: 700px; margin: 0 auto; display: flex; flex-wrap: wrap;}
		#ZonaPrimaria,
		#ZonaSecundaria { flex: 1; display: flex; align-items: center; flex-direction: column; padding: 25px;}

			#AccesosSector a { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 180px; height: 180px; border-radius: 50%;}
				#ZonaPrimaria a { background-color: #18B596;}
				#ZonaSecundaria a {background-color: #9B59B6;}

				.IconoSector { display: flex; align-items: center; justify-content: center;}
				.IconoSector img { max-width: 100%; display: block;}

			.Label { display: block !important; text-align: center; padding-bottom: 10px;}
			.Label p { font:normal 1.4rem "CHANEWEI", Helvetica, Arial, sans-serif; color:#4A4A4A;}
			p.DescripcionLabel { text-align: center; margin-bottom: 10px; font-size: 0.9rem; color: #777777;}


/*TU ESCUELA EN NUMEROS:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*main*/
	#TuEscuelaNumeros div.General { padding: 130px 0;}
		#TuEscuelaNumeros main h1 { margin:0 0 10px 10px;}

		#AreaEstadisticas { list-style: none; width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
			#AreaEstadisticas li { flex: 1; margin: 10px; padding: 30px 15px; border-radius: 5px; text-align: center;}
				li#TazaEgreso { background-color: #E3E8D3;}
				li#TazaAbandono { background-color: #D6E8D5;}
				li#AlumnosAltoLengua { background-color: #F4E9DE;}
				li#AlumnosBajoMatematica { background-color: #EFD2D2;}

				#AreaEstadisticas h2 { width: 160px; margin: 0 auto; font-size: 4rem; color: #333333;}
				#AreaEstadisticas h3 { font-size: 1rem; color: #333333;}


/*HERRAMIENTAS:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*main*/
#GrupoHerramienta { padding-top: 15px;}
	#Herramientas main h1 { margin-left: 15px;}

	.ModuloHerramienta { margin-bottom: 45px;}
		#GrupoHerramienta h2 { display: block; margin-bottom: 5px;  padding-left: 15px; font-size: 1.2rem; color: #333333; font-weight: bold;}

		#GrupoHerramienta ul { list-style: none; width: 100%; display: flex; flex-wrap: wrap;}
			#GrupoHerramienta li { position: relative; flex: 0 1 calc(20% - 16px); margin: 8px; padding: 15px 15px 45px 15px; border: 1px solid #ccc; border-radius: 5px;}
				#GrupoHerramienta img { max-width: 100%; display: block; border-radius: 5px; margin-bottom: 10px;}
				#GrupoHerramienta h3 { font-size: 1rem; color: #333333; display: block; margin-bottom: 5px;}
				#GrupoHerramienta p { display: block; margin-bottom: 10px; font-size: 0.85rem; color: #333333;}
				#GrupoHerramienta a { position: absolute; left: 15px; bottom: 10px; font-size: 0.9rem; display: inline-block; cursor: pointer;}

/*SOBRE NOSOTROS:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*main*/
	#SobreBoletin main h1 { display: block; margin-bottom: 5px;}

	#ModuloPreguntas { display: block; margin:40px 0 20px 0;}
		#ModuloPreguntas h2 { font-size: 1.5rem; display: block; margin-bottom: 10px;}

		#ListaPreguntas { list-style: none; display: block;}
			#ListaPreguntas li { display: block;}
				#ListaPreguntas a { position: relative; padding: 10px; font-size: 0.9rem; color: #000; display: block; margin-top: 10px;  background-color: #fff; border: 1px solid #ccc; border-bottom: none; border-radius: 5px 5px 0 0; cursor: pointer;}
				#ListaPreguntas p { position: relative; overflow: hidden; font-size: 0.9rem; padding:0 10px;  background-color: #fff; border: 1px solid #ccc; border-top: none; border-radius: 0 0 5px 5px; max-height: 0;
									-webkit-transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
									transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;}

				#ListaPreguntas a::after { content: ""; position: absolute; top: 10px; right: 10px; width: 21px; height: 21px; border-radius: 50%; background: #000 url(../imagenes/icono-flecha-desplegable.png) no-repeat 50% 50%; background-size: 5px auto;
											-webkit-transition: -webkit-transform 0.3s ease-in-out;
											transition:transform 0.3s ease-in-out;}

				/*Desktop*/
				.Desktop #ListaPreguntas a:hover { background-color: #ddd;}

				/*select*/
				#ListaPreguntas li.select a::after  { -webkit-transform: rotate(90deg);
													  transform: rotate(90deg);}

				#ListaPreguntas li.select p { max-height: 2000px; padding-bottom: 10px;}
				/*.......*/


/*INDICADORES DE TRAYECTORIA:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*header*/
	#AreaLogin { float: right; padding-top: 20px;}
		a#BtnLoginMobile { display: inline-block; vertical-align: middle; width: 40px; height: 40px; border-radius: 50%; margin:0 5px 0 0; padding-top: 10px; background-color: #FFCF45;}
		a#BtnLoginMobile .glyphicon { font-size: 18px; color: #393939;}

		#BtnMenuMobile { display: none;}

		#LoginArea { position: relative; display: inline-block; vertical-align: middle; }
			#LoginId { display: flex; position: relative; text-align: left; padding:0;}
				#LoginId > div { display: flex; flex-direction: column; justify-content: center; align-content: center;}

					p#TxtHola { font:normal 1.2rem "CHANEWEI", Helvetica, Arial, sans-serif;  line-height: 1rem !important; color: #F3D333; margin-bottom: 0;}
					p#LoginNombre { font:normal 1rem "CHANEWEI", Helvetica, Arial, sans-serif; color: #444444; margin-bottom: 0;}


			#Cue { flex: 1 1 100%; position: absolute; z-index: 9000; overflow: hidden; top: 55px; right: 0; display: flex; flex-wrap: wrap; width: 350px; padding: 0 15px; background-color: #fbfbfb; max-height: 0;
						-webkit-transition:  max-height 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955), padding 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
						transition:  max-height 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955), padding 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);}


				#Cue ul { display: flex; flex-wrap: wrap; list-style: none; text-align: left; padding-left: 0;}
				#Cue li { flex: 1 1 50%; padding:7px;}
				#Cue p { font-size:0.8rem; color: #444444;}
				#Cue strong { font-size: 0.8rem; display: block;}


				#AccionesLogin { display: flex; flex-wrap: wrap; width: 100%; }

				a#BtnCerrarSesion { flex: 0 0 45%; padding: 7px 10px 7px 30px; text-align: left; font:normal 10px "CHANEWEI", Helvetica, Arial, sans-serif; border-radius: 5px; color: #5F6C6C; border: 1px solid #606D6C; background:  url(../imagenes/icono-flecha-izq.svg) no-repeat 10px 50%;
									background-size:15px auto;}

				a#BtnSwitch {flex: 0 0 45%; margin-left: 5%; padding: 7px 10px 7px 30px; text-align: left;  font:normal 10px "CHANEWEI", Helvetica, Arial, sans-serif; border-radius: 5px; color: #5F6C6C; background: #FFCF45 url(../imagenes/icono-switch.svg) no-repeat 10px 50%;  background-size:15px auto;}


			/*Desktop*/
			.Desktop a#BtnCerrarSesion:hover {border-color:#000; color: #000 !important;}
			.Desktop a#BtnSwitch:hover { background-color: #5F6C6C; color: #FFCF45;}

			/*cuemode*/
			.cuemode #Cue { max-height: 2000px; border-top: 4px solid #F3D333; padding-top: 20px; padding-bottom: 20px;}
			/*.......*/

/*main*/
	#Menus { width: 100%; background-color: #343434; }

		#Menus .Viewport { align-items: center;}
			#MenuSecundario {list-style: none;  flex: 0 0 auto; display: flex; flex-direction: column; border-left: 2px solid #FDD306; padding-left: 10px;}
				#MenuSecundario li { text-align: left;}
				#MenuSecundario a { display: block; padding: 5px 0; font:normal 0.95rem "CHANEWEI", Helvetica, Arial, sans-serif; color: #fff;}

			#MenuGeneral { list-style:  none; flex: 1; display: flex; justify-content: flex-end; margin: 0;}
				#MenuGeneral li { position: relative; flex: 0 1 150px;  display: flex; flex-direction: column; justify-content: center; align-items: center;}
					#MenuGeneral a { display: block; text-align: center; padding: 20px; font:normal 0.85rem "CHANEWEI", Helvetica, Arial, sans-serif; color: #fff;}
					#MenuGeneral figure { position: relative; width: 70px; height: 70px; padding: 10px; margin: 0 auto; display: flex; align-items: center; justify-content: center;background-color: #18B596; border-radius: 50%;}
					#MenuGeneral img { max-width: 100%; display: block;}
					#MenuGeneral p { display: block; text-align: center; margin-top: 5px;}

			/*Desktop*/
			.Desktop #MenuGeneral li:not(.select):hover figure { background-color: #a4a4a4;  }
			.Desktop #MenuSecundario li:not(.select):hover a { color: #a4a4a4;}

			/*select*/
			#MenuSecundario li.select a { color: #FDD306; cursor: default;}

			#MenuGeneral li.select a { cursor: default;}
			#MenuGeneral li.select figure { background-color: #9b59b6;}
			/*.......*/


	div.General { background-color: #f2f2f2; padding: 70px 0;}
		.Flex { display: flex; flex-wrap: wrap;}
			#NavFiltros { flex: 0 0 320px; padding-right: 50px;}
				#NavFiltros h2 { font-weight: normal; font-size: 0.8rem; color:#777777;}
				#NavFiltros h3 { display: block; margin-bottom: 15px; font-size: 1.4rem; color: #333333;}

				#BtnVolverSeleccionar { display: block; }
				#BtnVolverSeleccionar span { font-size: 13px; color: #444444;}

				#NavFiltros fieldset { margin: 20px 0 10px 0;}
					#NavFiltros label { display: block; margin-bottom: 5px; font-size: 0.8rem; padding-left: 10px; font-weight: 700; color: #333333;}
					#NavFiltros .chosen-container { margin-bottom: 10px;}

					/*mobile*/
					.Mobile #NavFiltros select { width: 100%; display: block; margin-bottom: 10px !important; padding: 10px; font-size: 0.85rem; border: 1px solid #AAAAAA; border-radius: 5px;}
					/*......*/

				#BtnActualizarGrafico { width: 100%; display: block;}

				#GloboAyuda { position: relative; width: 100%; border: 1px solid #AAAAAA; margin-top: 15px; padding: 15px; background-color: #fff; border-radius: 5px;}
					a#BtnCerrarGloboAyuda { position: absolute; z-index: 1000; right: 0; top: 0; display: block; width: 40px; height: 40px; background: url(imagenes/icono-menu-close.svg) no-repeat 500px 500px, url(imagenes/chosen-sprite.png) no-repeat 15px 5px; background-size: 15px 15px, 70px auto;}

					#GloboAyuda span { position: relative; overflow: hidden; display: block; width: 100%; max-height: 0;}
						#GloboAyuda p { font-size: 0.8rem; text-align: left; display: block;}
						#GloboAyuda p strong { display: block; font-size: 1rem; margin-bottom: 5px;}

				/*ayudamode*/
				#GloboAyuda.ayudamode a#BtnCerrarGloboAyuda { background-position: 15px 10px, 500px 500px; }
				#GloboAyuda.ayudamode span { max-height: 2000px;}
				/*.........*/

			#ZonaResultados { flex: 1; }
				#Grafico { width: 100%; display: flex; flex-direction: column; padding:0 15px 15px 15px; background-color: #fff; border-radius: 5px;}
					#Grafico header { display: flex; flex-wrap: wrap; align-items: flex-start; flex: 0 0 auto; width: 100%;}
						#TituloGrafico { flex: 1; font-size: 1.1rem; padding-top: 15px; padding-right: 25px; font-weight: bold; color: #333333; }

						#NavGrafico {flex: 0 0 300px; display: flex; justify-content: flex-end; align-items: center; padding-top: 15px;}
							#NavGrafico p { font-size: 0.8rem; color: #666666;}
							#NavGrafico ul { list-style: none; display: flex;}
							#NavGrafico li { padding-left: 5px;}
								#NavGrafico a { font:normal 11px "CHANEWEI", Helvetica, Arial, sans-serif; }
								#NavGrafico a:visited, #NavGrafico a:link , #NavGrafico a:active {color:black}
								a#BtnGrafico { background: url(../imagenes/icono-grafico.svg) no-repeat 5px 50%; background-size: 15px auto; }
								a#BtnTabla { background: url(../imagenes/icono-lista.svg) no-repeat 5px 50%; background-size: 15px auto;}

					/*carga grafico*/
					#LoadGrafico { flex: 1; width: 100%; padding: 20px; text-align: center; min-height: 500px;}
						#Default { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 500px;}
							#Default img { width: 50px;}
							#Default p { font-size: 1.2rem; color: #333333;}


						#LoadGrafico img { display: block; margin: 0 auto; max-width: 100%;}

					#Grafico footer { flex: 0 0 auto;}
						#Fuente { font-size: 12px;}


				#OrientacionLectura {  width: 100%; padding: 25px 0 20px 0;}
					#OrientacionLectura p { font-size: 0.8rem;}
					#OrientacionLectura p strong { display: block; margin-bottom: 10px;  font:normal 1.2rem "CHANEWEI", Helvetica, Arial, sans-serif; }

				#GraficoTabla {  width: 100%; padding-top: 15px;}
					#BtnVerTabla { display: inline-block; padding-left: 40px; font-size: 1rem; background-image: url(../imagenes/icono-ojo-blanco.svg); background-repeat: no-repeat; background-position: 10px 50%; background-size: 25px auto;}

					#ContentTabla { position: relative; overflow: hidden; max-height: 0;
									-webkit-transition:  max-height 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
									transition:  max-height 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);}

						table, tr, th, td { font-size: 0;  border-collapse: collapse;}

						#GraficoTabla table { width: 100%; margin: 35px 0; text-align: left;}
							#GraficoTabla thead td { padding: 5px 5px 10px 5px; font-size: 0.9rem; font-weight: bold; color: #333333;}
							#GraficoTabla tbody td { padding: 15px 5px; border-bottom: 1px solid #CCCCCC; font-size: 0.9rem; color: #333333;}
							#GraficoTabla tbody tr:last-child td { border: none;}


					/*Desktop*/
					.Desktop #GraficoTabla tbody tr:hover td { background-color: #fff;}

					/*tablemode*/
					.tablemode #ContentTabla { max-height: 10000px;}
					/*.........*/



/*MODAL:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
.Modal { position:fixed; overflow-x: hidden; overflow-y:auto; z-index:9998; top:0; left:0; padding: 30px; display:flex;  align-items: center; justify-content: center; width:100%; height:100%; background:rgba(255, 255, 255, 0.9);  opacity: 0; visibility: hidden;
			 -webkit-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
			 transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;}

	.ContentModal { position: relative; background-color: #fff; text-align: left; padding: 15px; border:1px solid #ccc;}
		a#BtnCloseModal { position: absolute; top: -15px; right: -15px; display: block; width: 32px; height: 32px; background:#ccc url(../imagenes/icono-menu-close.svg) no-repeat 50% 50%; border-radius: 50%; background-size: 20px 20px; cursor: pointer; }
		.ContentModal p { font-size: 1.3rem; }

		a.BtnTriggerModal { display: inline-block; cursor: pointer;}

		/*modalmode*/
		.modalmode { overflow: hidden; }
		.modalmode .Modal { opacity: 1; visibility: visible; }
		/*.........*/
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*COMPATIBLIDADES///////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
	.Mobile select {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
	.Mobile select { padding-right:35px; background:#fff url(../imagenes/flecha-select.gif) no-repeat right 50%;}
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*RESPONSIVE///////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 1920px) {
html { font-size: 15px; /*1rem = 15px*/}
    .Viewport { max-width:1360px;}
	.container {width: 1360px !important;}

/*HOME*/
	p#TituloIngreso { left: calc((100% - 1360px)/2);}
}

@media (max-width: 1570px) {
/*HOME*/
	p#TituloIngreso { bottom: 30px;}
}

@media (max-width: 1470px) {
.Viewport { max-width:1200px;}
.container {width: 1200px !important;}

/*HOME*/
	p#TituloIngreso { left: calc((100% - 1200px)/2); bottom: 45px;}
}

@media (max-width: 1300px) {
.Viewport { padding:0 30px; max-width:none;}
.container {width: 100% !important; padding:0 30px;}
}

@media (max-width: 1250px) {
/*HOME*/
#SlideGeneral { height: 450px; max-height: none;  min-height: auto;}
	#ContentSlideGeneral { width: 100%; height: 100%;}
		#ContentSlideGeneral div { height: 100%;}
		#ContentSlideGeneral figure { height: 100%;}
		#ContentSlideGeneral img { max-width: inherit;  max-height: 100%;}
		#ContentSlideGeneral img.Foto1 { float: right;}
		#ContentSlideGeneral img.Foto2 { float: right;}
		#ContentSlideGeneral img.Foto3 { float: right;}
			p#TituloIngreso { left: 30px; bottom: 30px;}

/*HERRAMIENTAS*/
	#GrupoHerramienta li {  flex: 0 1 calc(25% - 16px);}
}

@media (max-width: 1000px) {
/*HOME*/
/*footer*/
	#ba-footer .col-xs-3,
	#ContentPlataforma { float: none; width: 100%; display: block;}

	#ContentLogoFooter { text-align: center;}
	#ba-footer .container-ba { text-align: center; border: none; padding: 0 0 20px 0;}
	#ba-footer .container-ba a { width: 100% !important; display: block !important;}
		.container-ba img {width: 120px !important; margin: 0 auto;  display: block !important; clear: both;}

	#DataPlataforma{ display: block; text-align: center; padding-bottom: 20px;}
	#ContentPlataforma p,
	#ContentPlataforma a,
	#ContentPlataforma address {font-size: 0.8rem;}

	#ContactoPlataforma{ display: block; text-align: center; padding-left: 0;}


/*INDICADORES DE TRAYECTORIA*/
	#NavFiltros { flex: 1 1 100%; padding-right: 0; margin-bottom: 25px;}

	#BtnVolverSeleccionar,
	#BtnActualizarGrafico { max-width: 30%; }

	#ZonaResultados { flex: 1 1 100%;}
		#TituloGrafico,
		#NavGrafico { flex: 1 1 100%; justify-content: flex-start;}

		#OrientacionLectura { flex: 1 1 100%; padding-left: 0;}

		#Grafico { flex: 1 1 100%; }
			#GraficoTabla { text-align: left;}
				#GraficoTabla thead { display: none;}

				#GraficoTabla,
				#GraficoTabla tbody,
				#GraficoTabla tbody td { display: block;}

				#GraficoTabla tbody { display: flex; flex-wrap: wrap;}
				#GraficoTabla tbody tr { flex: 0 1 25%; border-bottom: 1px solid #CCCCCC;}
				#GraficoTabla tbody td { border: none; font-size: 1.1rem; padding: 15px;}
				#GraficoTabla tr td::before { content: attr(data-label); font-size: 10px; color: #525252; display: block;}

}

@media (max-width: 930px) {
/*HOME*/
/*main*/
	p#TituloIngreso { -webkit-transform-origin: 0 100%;
					  transform-origin: 0 100%;
					  -webkit-transform: scale(0.8);
					  transform: scale(0.8);}

	p#IntroIngreso br { display: none;}

/*footer*/
	#LogoFooter .container-ciudad { margin-top: 25px;}


/*HERRAMIENTAS*/
	#GrupoHerramienta li { flex: 0 1 calc(33.33% - 16px); }

/*INDICADORES DE TRAYECTORIA*/
	#BtnVolverSeleccionar,
	#BtnActualizarGrafico { max-width: none; }
}

@media (max-width: 765px) {
/*HOME*/
/*footer*/
	#ba-footer .footer-row { padding-bottom: 20px;}
}

@media (max-width: 760px) {
/*BIENVENIDO*/
	.Interna #nombre-sitio { display: none !important;}
	.Interna #ba-logo { border: none;}

	#LoginId { display: none;}

	#Cue { position: fixed; overflow-y: hidden; overflow-y: auto; right: auto; top: 80px; left: 0; display: flex; flex-wrap: wrap; align-items: center; width: 100%; height:calc(100% - 80px); background-color: #fbfbfb;}
	#Bienvenido #Cue { align-items: flex-start;}
		#Cue ul { flex: 0 0 390px; margin: 0 auto;}
			#Cue p { font-size: 1rem;}

		#AccionesLogin {  flex: 0 0 390px;  width: 100%; display: flex; justify-content: space-around; flex-wrap: wrap; margin: 20px auto 0 auto;}
			a#BtnCerrarSesion,
			a#BtnSwitch { flex: 1; margin:0 5px; font-size: 14px; margin-left: 0;}

	/*cuemode*/
	.cuemode { overflow: hidden;}
	/*......*/

/*INDICADORES-TRAYECTORIA*/
	.Plataforma #BtnMenuMobile { display: inline-block; vertical-align: middle; width: 40px; height: 40px; border-radius: 50%; margin: 0 5px 0 0;padding-top: 10px;background-color:#d7d7d7; }
	.Plataforma #BtnMenuMobile span { color: #515151;}

	#Menus { position:fixed; overflow-x: hidden; overflow-y:auto; z-index:9000; top:80px; left:0; width:100%; height: calc(100% - 80px); display: flex; align-items: center; justify-content: center; background:rgba(52, 52, 52, 0.9);max-height: 0;
			-webkit-transition:  max-height 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955), padding 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
			transition:  max-height 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955), padding 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);}

		#Menus .Viewport.Flex { display: block; height: auto; text-align: center; padding: 0;}
			#MenuSecundario { margin-bottom: 25px; width: 200px; margin: 0 auto;}

			#MenuGeneral { width: 100%; max-width: 300px; margin: 0 auto;  display: flex; flex-wrap: wrap;}
			#MenuGeneral li { flex: 1 1 50%;}

	/*cuemode*/
	.menumode { overflow: hidden;}
	.menumode #Menus { max-height: 2000px; padding-top: 20px; padding-bottom: 20px;}
	/*......*/
}

@media (max-width: 710px) {
/*INDICADORES DE TRAYECTORIA*/
	#TituloGrafico { padding-left: 5px;}

	#NavGrafico { width: 100%; flex-direction: column; justify-content: flex-start;}
		#NavGrafico p { align-self: flex-start; padding-left: 5px;}
		#NavGrafico ul { width: 100%; margin-top: 5px;}
		#NavGrafico li { flex: 1; padding: 0 5px;}
		#NavGrafico a { display: block;}
		#NavGrafico li:first-child a { padding-left: 10px;}

	#BtnVerTabla { width: 100%; padding-left: 0;}
	#GraficoTabla tbody tr { flex: 0 1 33.33%;}

/*HERRAMIENTAS*/
	#GrupoHerramienta li {flex: 0 1 calc(50% - 16px);}
}


@media (max-width: 650px) {
/*HOME*/
	#ba-logo { display: block;}
	p#TituloIngresoMobile { display: block; font:normal 2.5rem "CHANEWEI", Helvetica, Arial, sans-serif; line-height: 1.3em !important; color: #000;}
	p#TituloIngreso { display: none; }

	#SlideGeneral { height: 270px;}
	#BulletsSlideGeneral { bottom: 15px;}
	#OverlaySlide { display: none;}

	p#IntroIngreso { font-size:1.2rem; }


/*BIENVENIDO*/
	#Bienvenido div.General { padding: 50px 0;}

/*TU ESCUELA NUMEROS*/
	#TuEscuelaNumeros div.General { padding: 50px 0;}
}

@media (max-width: 580px) {
/*HOME*/
/*header*/
	/*#ba-logo { display: block;}
	p#TituloIngresoMobile { display: block; font:normal 2.5rem "CHANEWEI", Helvetica, Arial, sans-serif; line-height: 1.3em !important; color: #000;}
	p#TituloIngreso { display: none; }*/

/*HERRAMIENTAS*/
	#GrupoHerramienta li {flex: 1 1 100%; margin-left: 0; margin-right: 0;}

/*INDICADORES DE TRAYECTORIA*/
	#GraficoTabla tbody tr { flex: 0 1 50%;}

}


@media (max-width: 500px) {
/*BIENVENIDO*/
	#Cue ul { flex: 0 1 390px;}

	#AccionesLogin { flex: 0 1 390px; justify-content: flex-start; padding-bottom: 20px; }
		a#BtnCerrarSesion { flex: 1 1 100%;  order: 2; margin-left: 0; margin-right: 0; }
		a#BtnSwitch {flex: 1 1 100%; order: 1; margin-bottom: 10px; margin-left: 0; margin-right: 0; }

/*SOBRE EL BOLETIN*/
	#SobreBoletin p.General,
	#ListaPreguntas p { font-size: 0.8rem;}
}

@media (max-width: 450px) {
.Viewport { padding:0 15px;}
.container { padding:0 15px;}

/*HOME*/
	#SlideGeneral { height: 200px;}

	p#TituloIngresoMobile { font-size: 2.1rem; line-height: 1em !important; margin-bottom: 10px;}
	p#TituloIngresoMobile span { display: block;}
	p#IntroIngreso { font-size: 1rem;}

/*BIENVENIDO*/
	#AccesosSector { display: block;}

/*INDICADORES DE TRAYECTORIA*/
	#MenuGeneral li { flex: 1 1 150px;}
	#MenuGeneral a,
	#MenuSecundario a { font-size: 15px;}

	#GraficoTabla tbody tr { flex: 0 1 100%;}
	#GraficoTabla tbody tr:last-child { border-bottom: none;}
}

main h4.leyenda_numeros_tu_escuela{
	display: flex;
	width: 100%;
	margin: 0 0 10px 10px;
	font-size: 1em;
}
#tablaResumen{
	width: 100%;
}
#tablaResumen table{
	width: 100%;
}
#tablaResumen table thead tr td{
	font-weight: bold;
}
#tablaResumen table tbody tr td.right, #tablaResumen table thead tr td.right{
	text-align: right;
}
#tablaResumen table tr td, #tablaResumen table tr th{
	font-size: 14px;
	padding: 5px;
	padding-top:8px;
	padding-bottom:8px;
	border-bottom: 1px solid #333333;
}
#detalleTablaResumen{
	margin-top:10px;
	font-size: 14px;
}
#detalleTablaResumen a{
	color:  #333333;
	font-weight: bold;
}
#detalleTablaResumen a:hover{
	color:#19c3e3;
}