*{
	margin: 0;
	padding: 0;
}

body {
	background: 'blue';
	color: white;
	margin: 0;
	
	
	
}


.example {  /**POSICION DEL MENU DESPLEGABLE**/

    position: absolute;
    
    width: 65em;
    height: 1rem;      /**se le quito altura para no opacar los demas menus principal de correos no daban nada**/
   
    
 
    border-radius: 1rem;
    -moz-border-radius: 1rem;
    -webkit-border-radius: 1rem;

    margin: -1rem 0rem 30rem 12.5em;   /**  6  0  0  5.5 posicion del menu desplegable **/
	
	z-index: 10;


}


.nav,.nav ul {

    list-style:none;
    margin:0;
    padding:0;

}

.nav {

    position: absolute;
    

}

.nav ul {

    height: 0rem;
    left:-1rem;      /**dezplaza las cajas de los submenus a la izquierda o derecha**/
    overflow:hidden;
    position:absolute;
    top:46px;

}

.nav li {

    float:left;
    position:relative;

}

.nav li a {

    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    background-color: #0c0c71;   /**cambia el color del menu**/
    border:1px solid #6E67A6;
    color:#FFF;
    display:block;
    font-size:0.9rem;
    line-height: 2.3rem;  /** incrementa el ancho de los menus principales **/
    padding: 0.5rem 3rem;    /**cmbia el tamaño del menu desplegable  0.5 altura     1.84 ancho menu pri**/
    text-decoration:none;
    transition: 0.5s;

}

.nav li:hover > a {

    background:#8CCA33;
    border-color:#6E67A6;
    color:#fff;

}

.nav li:hover ul.subs {
	
    height: 30rem; /** cambia la altura a nive general de los submenus para mas opciones**/
    width: 30rem;   /**aumenta el ancho de los submenus a nivel general**/
	
}

.nav ul li {

    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    opacity:0;
    transition:0.5s;
    width: 30rem;    /** se modifica las medidas  reduce el larga de los submenus de lado izquierdo**/

}

.nav li ul li {

    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -webkit-transition-delay:0s;
    transition-delay:0s;

}

.nav li:hover ul li {

    opacity:1;
    -moz-transition-delay:0.5s;
    -o-transition-delay:0.5s;
    -webkit-transition-delay:0.5s;
    transition-delay:0.5s;

}

.nav ul li a {

    background:#7770B4;
    border-color:#6E67A6;
    color:#fff;
    line-height: 0.9rem;   /**cambia el ancho de las filas de los submenus**/
    -moz-transition:1.5s;
    -o-transition:1.5s;
    -webkit-transition:1.5s;
    transition:1.5s;

}
.nav li:hover ul li a {

    line-height: 0.9rem;  /** cambia el ancho de cada una de las filas del  los submenus   **/

}

.nav ul li a:hover {

    background:#8CCA33;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,25,0));

}   /**termina el codigodel menu desegable**/










.verificar input{  cursor: pointer;}

.verificar input:hover{  color: red; text-decoration: underline;
					transform: translateY(-0.2em) scale(1)}


.enviar input{  cursor: pointer;}

.enviar input:hover{  color: red; text-decoration: underline;
					transform: translateY(-0.2em) scale(1)}


	input::placeholder {   /** PARA DAR FORMATO A LOS MENSAJES INTERNOS DE LAS CASILLAS**/
  color: black;
  font-size: 1.2em;
  font-style: italic;
}			


.modal{
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.modal{
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.5);
		transition: all 500ms ease;
		opacity: 0;
		visibility: hidden;
		z-index: 25;   /** esta es la parte que controla la caja de ayuda rapida.. en este caso la puso encima del menu**/
	}
	#btn-modal:checked ~ .modal{
		opacity: 1;
		visibility: visible;
	} 
	.contenedor{
		width: 400px;
		height: 514px;
		margin: auto;
		background: #fff;
		box-shadow: 1px 7px 25px rgba(0,0,0,0.6);
		transition: all 500ms ease;
		position: relative;
		transform: translateY(-30%);

	}
	#btn-modal:checked ~ .modal .contenedor{
		transform: translateY(0%);
	} 
	.contenedor header{
		padding: 10px;
		background: #db8046;
		color: #fff;
	}
	.contenedor label{
		position: absolute;
		top: 10px;
		right: 10px;
		color: #fff;
		font-size: 15px;
		cursor: pointer;
	}
	#btn-modal{
		display:none;
	}
	.lbl-modal{
		position: absolute;
		background: #000;
		padding: 5px 15px;
		border-radius: 4px;
		cursor: pointer;
		
		margin: -13rem 0rem 10rem -4.2em;

		border: 0.4em solid #fefefe;
            box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, .4);
			border-top-left-radius: 10px;
            border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;

		
	}

.lbl-modal:hover{  color: red; text-decoration: underline;
					transform: translateY(-0.2em) scale(1)}	
	

	@media only screen and (min-width:320px) and (max-width:768px){
		.contenedor{
			width: 95%;
		}
	}









p {

	margin-bottom: 1em;  /**espaciado en el final del texto o parrafo**/
}



.header {
    

background: #823131;
    
font-size: 1.2em;
color: white;
font-family: Calibri;
padding: 0.7em 1em; /** el grosor de la caja superior fija**/

left: 0em;
top: 0;
right:0em;

 /** hacemos la posicion fija de la caja**/

}



.header a {

		color: white;
		text-decoration: none;

}


input[id="Matricula"] {  /** ANCHO  ALTO DE LAS CASILLAS INPUT DE LAS CASILLAS **/
  width: 20%;
  padding: 9px 20px;
  margin: 18px 0;
  box-sizing: border-box;
  border: 2px solid red;
  border-radius: 4px;

}


input[name="nombre2"] {
  width: 25%;
  padding: 9px 20px;
  margin: 8px 0em;
  box-sizing: border-box;
  border: 2px solid red;
  border-radius: 4px;

}


input:invalid {
  border: 2px solid red;
}

input:valid {
  border: 2px solid green;
}

input::placeholder {   /** TAMAÑO DEL LETRA COLOR ETC PARA EL TEXTO DE INTERNO DE LAS CASILLAS**/
  
  font-size: 0.8em;
 
}



.menu-icon{
	display: none;
}


.div_container {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;  /** no amontona las cajas o imagenes, sino que la posiciona una abajo de la otra**/



}



.main{

	padding-top: 20em;  /**80  separar la caja fija del area principal de la pagina**/
	padding-left: 3em;
	width: 95%;
	max-width: 95%;
	flex-wrap: wrap;
	

}


.imagenes .centra{
	
	
	width: 95%; /*95%*/
	max-width: 95%;
	display: flex;
	align-items: center;   /**para centrar up-down EN LAS CAJAS**/
	align-content: center;
	justify-content:space-between;
	padding: 1.4em 2em;
	   /** centra el contenido en el epacio de la pagina **/ 
	flex-wrap: wrap;

	

	

}

.verificar{

	top: 15em;
}

.enviar{
	top: 10em;
}


.centradatos {  /** FONDO DE LA PAGINA AL DESPLEGAR EL FORMULARIO**/

	    /** background: RGB(213, 219, 219);**/

	     /**RGB(130, 224, 170);*/

	     /**#A8E9D9;*/
}






.cajavalormes {
		
		display: flex; /**CENTRA Y MUEVE LAS LETRAS DE LA CAJA**/
		margin: -15em 0em 0em 67em;   /** -15  0  0  67    */ 
		
		 width: 19em;
            height: 5em;
            overflow: hidden;     /**esconde el desbordamiento del objeto**/
            border: 0em solid #fefefe;  /**aumenta o reduce el borde blanco de la caja**/
            box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, .4);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
            background:  #0c0c71;
			line-height: 1.5;
	   		 font-size: 0.9em;
			  font-weight: 100;
           font-family:Calibri, Garamond, 'Comic Sans';
			color: white;
			
			justify-content: center;  /** centra texto de derecha a izquierda **/
			
			align-items:flex-start;  /** alinea texto de arriba hacia abajo **/
			text-align:center;
}

.cajavalormes h2 {
			justify-content: center;
			text-align:center;
}





.tablas {
            position: absolute;
            top: 19em; /**18.8*/ /** baja o sube plataforma de preinscripciones 2022-2023*/
            left: -1em;
            right: 0rem;
            bottom: 10em;  /**10*/
            /**margin: auto;**/
            word-wrap: break-word;

            
           		

}

.centrar{
		position: relative;  /** baja o sube la tabla del formulario */
		top: 0em; /**-1*/
		bottom: 10em;

}







.turnos h5{
		
		color: white;
		margin: -1.2rem 0rem 0rem 62rem;   /**cntrola eltexto de navegacion blog**/


}


.contabilidad h5{
		
		font-size: 3em;
		color: black;
		
		margin: -2.3em 0rem 0rem 5.5em; 


}


.imagenes {

	margin: 0;
	height: 6rem;
	width: 69rem;
	margin: 3rem 0px 0px 5.6rem;   /**tenia 7 rem **/

}


.imagenes {
	
	
	display: flex;
	align-items: center;   /**para centrar up-down EN LAS CAJAS**/
	justify-content: center;
	align-items: flex-end;

	justify-content: space-between;   /** alinea arriba y abajo **/
	justify-content: space-between;

}



.menutec {

	margin: 0;
		display: flex;
		margin: 0.7em 0rem 0rem 19.2em;
		justify-content: center;
		justify-content: space-around;
		align-items: center;
		 width: 30em;
            height: 3em;
            overflow: hidden;     /**esconde el desbordamiento del objeto**/
            border: 0em solid #fefefe;  /**aumenta o reduce el borde blanco de la caja**/
            box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, .4);

            font-size: 1em;
			z-index: 20;
             

}


.tecinicio {

		margin: 0;
		display: flex;
		margin: -2.7em 0rem 0rem 20.7em;
		
		 width: 2.5em;
            height: 2em;
            z-index: 40;

}

.tecinicio div:hover{

	transform: translateY(-0.2em) scale(1.05);}


.tecmision{

		margin: 0;
		display: flex;
		margin: -1.9em 0rem 0rem 32em;
		
		 width: 2.5em;
            height: 2em;
			 z-index: 40;
}

.tecmision div:hover{
	transform: translateY(-0.2em) scale(1.05);}

.tecvision{

		margin: 0;
		display: flex;
		margin: -2em 0rem 0rem 43em;
		
		 width: 2.5em;
            height: 2em;
			 z-index: 40;
}

.tecvision div:hover{
	transform: translateY(-0.2em) scale(1.05);}



.main2{

	width: 98%;  /**se centra o justifica la posicion de la tabla */
	max-width: 98%;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.demo {
            
            /**margin: 0em 0rem 0rem 17em;  0  0  0  2*/
            width: 40rem;
            height: 21rem;
            overflow: hidden;
            border: 10px solid #fefefe;
            box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, .4);
            z-index: 10;
        }




.datostec {

		
		
		/*margin: -2em 0rem 0rem 25em;  -30 0 0 51*/
		justify-content: center;
		justify-content: space-around;
		align-items: center;
		 width: 25em;
            height: 30em;
            overflow: hidden;     /**esconde el desbordamiento del objeto**/
            border: 0em solid #fefefe;  /**aumenta o reduce el borde blanco de la caja**/
            box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, .4);
            
      
           

}

.textotec h2{

		/**valor hijo para acomodar las letras en la caja centrarlas manipular margenes**/
            
            display: flex;
			width: 21em;   /**31   20se amplia el largo o ancho en la caja para escribir el texto**/
            height: 30em;;
             font-size: 0.9em;

          	
			 
			  font-color: white;
			  font-family: Monospace;
			  font-weight: 120;
          	color: white; 

          	text-align : justify;  /**justifica el texto en la caja con la imagen**/
            /** 3 rem up-down     0      0    56.5  left-rigt**/
          
            margin: -25em 0em 0em 46em;  /*-25  0  0  36 */
}






.footer {
	 
	
	 /**top: 59em;**/
	 right: 0rem;
	 left: 0em;
	 color: black;
	 font-size: 0.8em;
	font-family: Arial;
	vertical-align: middle;
	 margin: 17.2em 0rem 0rem -2.5em;
    background-color:#81ecec;
    width: 102%;
	max-width: 110%;
    height: 64px;
    /**position: relative;     top 13**/

		justify-content: center;  /** centra texto de derecha a izquierda **/
			
			align-items:center;  /** alinea texto de arriba hacia abajo **/
			text-align:center; 
			vertical-align: middle;   
    
}



@media only screen and (min-device-width : 320px) and (max-device-width : 736px) and (orientation:portrait){



.imagenes .centra{
	
	
	width: 70%; /*95%*/
	max-width: 70%;
	display: flex;
	align-items: center;   /**para centrar up-down EN LAS CAJAS**/
	align-content: center;
	justify-content:space-between;
	padding: 1.4em 2em;
	   /** centra el contenido en el epacio de la pagina **/ 
	flex-wrap: wrap;

	

	

}




.tablas {
            position: absolute;
            top: 44.8em; /**18.8*/ /** baja o sube plataforma de preinscripciones 2022-2023*/
            left: 3em;
            right: 0rem;
            bottom: 10em;  /**10*/
            /**margin: auto;**/
            word-wrap: break-word;

            
           		

}



.header {
    

background: #823131;
    
font-size: 1.2em;
color: white;
font-family: Calibri;
padding: 0.7em 1em; /** 0.7        1     el grosor de la caja superior fija**/

left: 0em;
top: 0;
right:0em;

 /** hacemos la posicion fija de la caja**/

}




.centrar{
		position: relative;  /** baja o sube la tabla del formulario */
		top: 0em; /**-1*/
		bottom: 10em;
		 left: 0em;
            right: 0rem;

}



.example {

    position: absolute;
    
    width: 59em;
    height: 1rem;      /**70    1    se le quito altura para no opacar los demas menus principal de correos no daban nada**/
   
    
 
    border-radius: 1rem;
    -moz-border-radius: 1rem;
    -webkit-border-radius: 1rem;

    margin: -1rem 0rem 0rem 1.5em;   /**  -1   0    30    12.5 posicion del menu desplegable **/
	
	z-index: 20;


}






.cajavalormes {
		
		display: flex; /**CENTRA Y MUEVE LAS LETRAS DE LA CAJA**/
		margin: -10em  0em   0em   45em;   /**-10  0   0   45 3em    auto    */ 
		
		 width: 19em;
            height: 5em;
            overflow: hidden;     /**esconde el desbordamiento del objeto**/
            border: 0em solid #fefefe;  /**aumenta o reduce el borde blanco de la caja**/
            box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, .4);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
            background:  #0c0c71;
			line-height: 1.5;
	   		 font-size: 0.9em;
			  font-weight: 100;
           font-family:Calibri, Garamond, 'Comic Sans';
			color: white;
			
			justify-content: center;  /** centra texto de derecha a izquierda **/
			
			align-items:flex-start;  /** alinea texto de arriba hacia abajo **/
			text-align:center;
}

.cajavalormes h2 {
			justify-content: center;
			text-align:center;
}








.footer {
	 
	
	width: 105em;  /*105em*/
	max-width: 105em;
    height: 60px;
	 
	 color: black;
	 font-size: 0.8em;
	font-family: Arial;
	vertical-align: middle;
	 margin: 17em -22rem -10rem -41em;  /* 17   -22   -10   -41*/
    background-color:#81ecec;
    
    /**position: relative;     top 13**/

		justify-content: center;  /** centra texto de derecha a izquierda **/
			
			align-items:center;  /** alinea texto de arriba hacia abajo **/
			text-align:center; 
			vertical-align: middle;   

    
}



}




@media only screen and (min-device-width : 320px) and (max-device-width : 736px) and (orientation:landscape){





.imagenes .centra{
	
	
	width: 80%; /*95%*/
	max-width: 80%;
	display: flex;
	align-items: center;   /**para centrar up-down EN LAS CAJAS**/
	align-content: center;
	justify-content:space-between;
	padding: 1.4em 1em;
	   /** centra el contenido en el epacio de la pagina **/ 
	flex-wrap: wrap;

	

	

}




.tablas {
            position: absolute;
            top: 44.8em; /**18.8*/ /** baja o sube plataforma de preinscripciones 2022-2023*/
            left: 3em;
            right: 0rem;
            bottom: 10em;  /**10*/
            /**margin: auto;**/
            word-wrap: break-word;

            
           		

}



.header {
    

background: #823131;
    
font-size: 1.2em;
color: white;
font-family: Calibri;
padding: 0.7em 1em; /** 0.7        1     el grosor de la caja superior fija**/

left: 0em;
top: 0;
right:0em;

 /** hacemos la posicion fija de la caja**/

}




.centrar{
		position: relative;  /** baja o sube la tabla del formulario */
		top: 0em; /**-1*/
		bottom: 10em;
		 left: 0em;
            right: 0rem;

}



.example {

    position: absolute;
    
    width: 59em;
    height: 1rem;      /**70    1    se le quito altura para no opacar los demas menus principal de correos no daban nada**/
   
    
 
    border-radius: 1rem;
    -moz-border-radius: 1rem;
    -webkit-border-radius: 1rem;

    margin: -1rem 0rem 0rem 1.5em;   /**  -1   0    30    12.5 posicion del menu desplegable **/
	
	z-index: 20;


}






.cajavalormes {
		
		display: flex; /**CENTRA Y MUEVE LAS LETRAS DE LA CAJA**/
		margin: -16em  0em   0em   45em;   /** -16  0  0  45    */ 
		
		 width: 19em;
            height: 5em;
            overflow: hidden;     /**esconde el desbordamiento del objeto**/
            border: 0em solid #fefefe;  /**aumenta o reduce el borde blanco de la caja**/
            box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, .4);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
            background:  #0c0c71;
			line-height: 1.5;
	   		 font-size: 0.9em;
			  font-weight: 100;
           font-family:Calibri, Garamond, 'Comic Sans';
			color: white;
			
			justify-content: center;  /** centra texto de derecha a izquierda **/
			
			align-items:flex-start;  /** alinea texto de arriba hacia abajo **/
			text-align:center;
}

.cajavalormes h2 {
			justify-content: center;
			text-align:center;
}







.footer {
	 
	
	width: 120em; /*105*/
	max-width: 120em;
    height: 60px;
	 
	 color: black;
	 font-size: 0.8em;
	font-family: Arial;
	vertical-align: middle;
	 margin: 17em 0rem -10rem -3em;
    background-color:#81ecec;
    
    /**position: relative;     top 13**/

		justify-content: center;  /** centra texto de derecha a izquierda **/
			
			align-items:center;  /** alinea texto de arriba hacia abajo **/
			text-align:center; 
			vertical-align: middle;   

    
}



}











/** 854    1020 */
@media only screen and (min-device-width : 823px) and (max-device-width : 1020px) {




.header {
    

background: #823131;
   
 width: 117.5%;
 height: 66%;
font-size: 1.2em;
color: white;
font-family: Calibri;
/**padding: 0.7em 1em; el grosor de la caja superior fija**/

margin: 0em  2em  0em  0em;


 /** hacemos la posicion fija de la caja**/

}



.header a {

		color: white;
		text-decoration: none;

}






.example {   /** se centra menu para que no salga del area **/

    position: absolute;
    
    width: 64em;   /** poisicon de izquiera a derecha del menu para no salirse del area**/
    height: 1rem;      /**se le quito altura para no opacar los demas menus principal de correos no daban nada**/
   
    
 
    border-radius: 1rem;
    -moz-border-radius: 1rem;
    -webkit-border-radius: 1rem;

    margin: 3rem 10rem 0rem 7em;   /** -1  0   30  12.5 posicion del menu desplegable izquierda derecha **/
	
	z-index: 20;


}


.imagenes .centra{
	
	
	width: 98%; /*100%    aumentamos el % para ampliar el acomodo de las figuaras en el espacio 100*/
	max-width: 98%;
	display: flex;
	align-items: center;   /**para centrar up-down EN LAS CAJAS**/
	align-content: center;
	justify-content:space-between;
	padding: 0em 5em 0em 5em;
	   /** centra el contenido en el epacio de la pagina **/ 
	 /**margin: 5rem 1rem 0rem -5em;**/

	flex-wrap: wrap;
}




.tablas {
            position: absolute;
            top: 22.8em; /**18.8*/ /** baja o sube plataforma de preinscripciones 2022-2023*/
            left: 3em;
            right: 0rem;
            bottom: 10em;  /**10*/
            /**margin: auto;**/
            word-wrap: break-word;

            
           		

}











.centrar{
		position: relative;  /** baja o sube la tabla del formulario */
		top: 0em; /**-1*/
		bottom: 10em;
		 left: 0em;
            right: 0rem;

}









.cajavalormes {
		
		display: flex; /**CENTRA Y MUEVE LAS LETRAS DE LA CAJA**/
		margin: 10em  0em   0em   55em;   /** 10   0   0  55 3em    auto    */ 
		
		 width: 19em;
            height: 5em;
            overflow: hidden;     /**esconde el desbordamiento del objeto**/
            border: 0em solid #fefefe;  /**aumenta o reduce el borde blanco de la caja**/
            box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, .4);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
            background:  #0c0c71;
			line-height: 1.5;
	   		 font-size: 0.9em;
			  font-weight: 100;
           font-family:Calibri, Garamond, 'Comic Sans';
			color: white;
			
			justify-content: center;  /** centra texto de derecha a izquierda **/
			
			align-items:flex-start;  /** alinea texto de arriba hacia abajo **/
			text-align:center;
}

.cajavalormes h2 {
			justify-content: center;
			text-align:center;
}






.footer {
	 
	
	width: 300em;  /*126em*/
	max-width: 300%;
    height: 60px;
	 
	 color: black;
	 font-size: 0.8em;
	font-family: Arial;
	vertical-align: middle;
	 margin: 17em -22rem -10rem -15em;  /* 17   -22   -10   -41*/
    background-color:#81ecec;
    
    /**position: relative;     top 13**/

		justify-content: center;  /** centra texto de derecha a izquierda **/
			
			align-items:center;  /** alinea texto de arriba hacia abajo **/
			text-align:center; 
			vertical-align: middle;   

    
}



}











@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation:portrait){
/** para la maoria de celulares en portrait ... **/



.header {
    

background: #823131;
   
 width: 117.5%;
 height: 66%;
font-size: 1.2em;
color: white;
font-family: Calibri;
/**padding: 0.7em 1em; el grosor de la caja superior fija**/

margin: 0em  2em  0em  0em;


 /** hacemos la posicion fija de la caja**/

}



.header a {

		color: white;
		text-decoration: none;

}






.example {   /** se centra menu para que no salga del area **/

    position: absolute;
    
    width: 64em;   /** poisicon de izquiera a derecha del menu para no salirse del area**/
    height: 1rem;      /**se le quito altura para no opacar los demas menus principal de correos no daban nada**/
   
    
 
    border-radius: 1rem;
    -moz-border-radius: 1rem;
    -webkit-border-radius: 1rem;

    margin: 3rem 10rem 0rem 7em;   /** -1  0   30  12.5 posicion del menu desplegable izquierda derecha **/
	
	z-index: 20;


}


.imagenes .centra{
	
	
	width: 98%; /*100%    aumentamos el % para ampliar el acomodo de las figuaras en el espacio 100*/
	max-width: 98%;
	display: flex;
	align-items: center;   /**para centrar up-down EN LAS CAJAS**/
	align-content: center;
	justify-content:space-between;
	padding: 0em 5em 0em 5em;
	   /** centra el contenido en el epacio de la pagina **/ 
	 /**margin: 5rem 1rem 0rem -5em;**/

	flex-wrap: wrap;
}




.tablas {
            position: absolute;
            top: 22.8em; /**18.8*/ /** baja o sube plataforma de preinscripciones 2022-2023*/
            left: 3em;
            right: 0rem;
            bottom: 10em;  /**10*/
            /**margin: auto;**/
            word-wrap: break-word;

            
           		

}











.centrar{
		position: relative;  /** baja o sube la tabla del formulario */
		top: 0em; /**-1*/
		bottom: 10em;
		 left: 0em;
            right: 0rem;

}









.cajavalormes {
		
		display: flex; /**CENTRA Y MUEVE LAS LETRAS DE LA CAJA**/
		margin: -10.5em  0em   0em   55em;   /** -10.5  0  0  55em    auto    */ 
		
		 width: 19em;
            height: 5em;
            overflow: hidden;     /**esconde el desbordamiento del objeto**/
            border: 0em solid #fefefe;  /**aumenta o reduce el borde blanco de la caja**/
            box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, .4);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
            background:  #0c0c71;
			line-height: 1.5;
	   		 font-size: 0.9em;
			  font-weight: 100;
           font-family:Calibri, Garamond, 'Comic Sans';
			color: white;
			
			justify-content: center;  /** centra texto de derecha a izquierda **/
			
			align-items:flex-start;  /** alinea texto de arriba hacia abajo **/
			text-align:center;
}

.cajavalormes h2 {
			justify-content: center;
			text-align:center;
}






.footer {
	 
	
	width: 129em;  /*129em*/
	max-width: 129%;
    height: 60px;
	 
	 color: black;
	 font-size: 0.8em;
	font-family: Arial;
	vertical-align: middle;
	 margin: 17em -22rem -10rem -15em;  /* 17   -22   -10   -41*/
    background-color:#81ecec;
    
    /**position: relative;     top 13**/

		justify-content: center;  /** centra texto de derecha a izquierda **/
			
			align-items:center;  /** alinea texto de arriba hacia abajo **/
			text-align:center; 
			vertical-align: middle;   

    
}



}

















@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation:landscape){
/** es el menu de 1024   768   en responsibe al reves jiji**/



.header {
    

background: #823131;
   
 width: 96%;    /** ancho de la franja marron**/
 height: 10%;
font-size: 1.2em;
color: white;
font-family: Calibri;
/**padding: 0.7em 1em; el grosor de la caja superior fija**/

margin: 0em  2em  0em  0em;


 /** hacemos la posicion fija de la caja**/

}



.header a {

		color: white;
		text-decoration: none;

}





.imagenes .centra{
	
	
	width: 90%; /*95%    aumentamos el % para ampliar el acomodo de las figuaras en el espacio 100*/
	max-width: 90%;
	display: flex;
	align-items: center;   /**para centrar up-down EN LAS CAJAS**/
	align-content: center;
	justify-content:space-between;
	padding: 0em 0em 0em 0em;
	   /** centra el contenido en el epacio de la pagina **/ 
	 /**margin: 5rem 1rem 0rem -5em;**/

	flex-wrap: wrap;
}





.imagenes { /** posicion de las imagenes de escudos**/

	margin: 0;
	height: 6rem;
	width: 93%;
	margin: 3rem 0px 0px 4rem;   /**tenia 7 rem **/

}


.imagenes {
	
	
	display: flex;
	align-items: center;   /**para centrar up-down EN LAS CAJAS**/
	justify-content: center;
	align-items: flex-end;

	justify-content: space-between;   /** alinea arriba y abajo **/
	justify-content: space-between;

}



	

.example {   /** se centra menu para que no salga del area **/

    position: absolute;
    
    width: 100%;   /** 68  poisicon de izquiera a derecha del menu para no salirse del area**/
    height: 1rem;      /**se le quito altura para no opacar los demas menus principal de correos no daban nada**/
   
    
 
    border-radius: 1rem;
    -moz-border-radius: 1rem;
    -webkit-border-radius: 1rem;

    margin: 3rem -10rem 0rem 0em;   /** -1  0   30  12.5 posicion del menu desplegable izquierda derecha **/
	
	z-index: 20;


}





.main{

	padding-top: 20em;  /**80  separar la caja fija del area principal de la pagina**/
	padding-left: 0em;
	padding-right: 0em;
	width: 100%;   /*80  80 */
	max-width: 100%;
	flex-wrap: wrap;
	

}












.tablas {
            position: absolute;
            top: 24.8em; /**18.8*/ /** baja o sube plataforma de preinscripciones 2022-2023*/
            left: -7em;
            right: 0rem;
            bottom: 20em;  /**10*/
            /**margin: auto;**/
            word-wrap: break-word;

            
           		

}





.cajavalormes {
		
		display: flex; /**CENTRA Y MUEVE LAS LETRAS DE LA CAJA**/
		margin: -8.5em  0em   0em   49em;   /** -8.5     0   0   49   em    auto    */ 
		
		 width: 19em;
            height: 5em;
            overflow: hidden;     /**esconde el desbordamiento del objeto**/
            border: 0em solid #fefefe; /** aumenta o reduce el borde blanco de la caja**/
            box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, .4);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
            background:  #823131; /**#0c0c71;*//
			line-height: 1.5;
	   		 font-size: 0.9em;
			  font-weight: 100;
           font-family:Calibri, Garamond, 'Comic Sans';
			color: white;
			
			justify-content: center;  /** centra texto de derecha a izquierda **/
			
			align-items:flex-start;  /** alinea texto de arriba hacia abajo **/
			text-align:center;
}

.cajavalormes h2 {
			justify-content: center;
			text-align:center;
}



	.lbl-modal{
		position: absolute;
		background: #000;
		padding: 5px 15px;
		border-radius: 4px;
		cursor: pointer;
		
		margin: -9rem 0rem 10rem -4.2em;

		border: 0.4em solid #fefefe;
            box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, .4);
			border-top-left-radius: 10px;
            border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;

		
	}	




.footer {
	 
	
	width: 90%;
	max-width: 90%;
    height: 60px;
	 
	 color: black;
	 font-size: 0.8em;
	font-family: Arial;
	vertical-align: middle;
	 margin: 13em 0rem -10rem 8.5em;
    background-color:#81ecec;
    
    /**position: relative;     top 13**/

		justify-content: center;  /** centra texto de derecha a izquierda **/
			
			align-items:center;  /** alinea texto de arriba hacia abajo **/
			text-align:center; 
			vertical-align: middle;   

    
}



}







@media only screen and (width : 1024px) and (height: 768px){
/** PARA PANTALLAS DE 1024  es el menu de 1024   768   en responsibe al reves jiji**/



.header {
    

background: #823131;
   
 width: 117.5%;
 height: 66%;
font-size: 1.2em;
color: white;
font-family: Calibri;
/**padding: 0.7em 1em; el grosor de la caja superior fija**/

margin: 0em  2em  0em  0em;


 /** hacemos la posicion fija de la caja**/

}



.header a {

		color: white;
		text-decoration: none;

}



.imagenes .centra{
	
	
	width: 100%; /*100%    aumentamos el % para ampliar el acomodo de las figuaras en el espacio 100*/
	max-width: 100%;
	display: flex;
	align-items: center;   /**para centrar up-down EN LAS CAJAS**/
	align-content: center;
	justify-content:space-between;
	padding: 0em 2em 0em 1em;
	   /** centra el contenido en el epacio de la pagina **/ 
	 /**margin: 5rem 1rem 0rem -5em;**/

	flex-wrap: wrap;
}



	

.example {   /** se centra menu para que no salga del area **/

    position: absolute;
    
    width: 64em;   /** poisicon de izquiera a derecha del menu para no salirse del area**/
    height: 1rem;      /**se le quito altura para no opacar los demas menus principal de correos no daban nada**/
   
    
 
    border-radius: 1rem;
    -moz-border-radius: 1rem;
    -webkit-border-radius: 1rem;

    margin: 3rem 0rem 0rem 10em;   /** -1  0   30  12.5 posicion del menu desplegable izquierda derecha **/
	
	z-index: 20;


}



.tablas {
            position: absolute;
            top: 24.8em; /**18.8*/ /** baja o sube plataforma de preinscripciones 2022-2023*/
            left: 11em;
            right: 0rem;
            bottom: 10em;  /**10*/
            /**margin: auto;**/
            word-wrap: break-word;

            
           		

}






.cajavalormes {
		
		display: flex; /**CENTRA Y MUEVE LAS LETRAS DE LA CAJA**/
		margin: -8.5em  0em   0em   57em;   /** -8.5   0   0   57  em    auto    */ 
		
		 width: 19em;
            height: 5em;
            overflow: hidden;     /**esconde el desbordamiento del objeto**/
            border: 0em solid #fefefe; /** aumenta o reduce el borde blanco de la caja**/
            box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, .4);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
            background:  #823131; /**#0c0c71;*//
			line-height: 1.5;
	   		 font-size: 0.9em;
			  font-weight: 100;
           font-family:Calibri, Garamond, 'Comic Sans';
			color: white;
			
			justify-content: center;  /** centra texto de derecha a izquierda **/
			
			align-items:flex-start;  /** alinea texto de arriba hacia abajo **/
			text-align:center;
}

.cajavalormes h2 {
			justify-content: center;
			text-align:center;
}


.lbl-modal{   /**ubica boton ayuda rapido*/
		position: absolute;
		background: #000;
		padding: 5px 15px;
		border-radius: 4px;
		cursor: pointer;
		
		margin: -12rem 0rem 10rem -4.2em;

		border: 0.4em solid #fefefe;
            box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, .4);
			border-top-left-radius: 10px;
            border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
		
	}






.footer {
	 
	
	width: 148em;
	max-width: 148%;
    height: 60px;
	 
	 color: black;
	 font-size: 0.8em;
	font-family: Arial;
	vertical-align: middle;
	 margin: 17em 0rem -10rem -14em;
    background-color:#81ecec;
    
    /**position: relative;     top 13**/

		justify-content: center;  /** centra texto de derecha a izquierda **/
			
			align-items:center;  /** alinea texto de arriba hacia abajo **/
			text-align:center; 
			vertical-align: middle;   

    
}



}