/*definir que todos los elementos se vean como bloques*/
header,  nav, section, aside, article, footer, figure, img {
	

   display: block;


}


/*Para control de margenes en toda la pagina*/
* {

     
      margin: 0px;
     padding: 0px;
 

}

body {
 
     width: 100%;
     

}

/*Contro de los colores de link*/

 A:link {
                text-decoration:none;
                color:white;
 } 


 A:visited {
                  text-decoration:none;
                  color:white;
} 

 A:active {
               text-decoration:none;
               color:white;
} 



/*Definir color y posicion de los textos en la cabecera principal*/
#cabecera {

      background: #191970;
    
      padding-top: 4px;

      color: white;



}



/*Texto para indicar el nombre de la consultoria*/
h1 {

   font: bold 22px verdana, sans-serif;
   margin-left: 10px;
  color: white;
}


/*Texto para indicar el subtitulo del proposito de la pagina de la consultoria*/
h2 {

   font: bold 16px verdana, sans-serif;
  text-align: center;
   color: white;
   padding-top: 4px;
  
}

/* tomar en cuenta el ajuste para la letar "t" donde se solicita cotizacion de cursos, esta pendiente su ajuste */


/*Ajuste del texto de la historia del autor*/
c {

   font: bold 16px verdana, sans-serif;
  text-align: justify;
   color: black;
  
}



/*Ajuste del color para el titulo del contenido temático sobre la pagina de cursos de capacitacion*/
f {
   
   
   font: bold 12px verdana, sans-serif;
  text-align: justify;
   color: yellow;
  
}




/*Ajustar todas los menus de manera general*/

ul, ol {

  list-style: none;
 

}

/* quitar 
/* para indicar a los "a href" se desplieguen como block */

.posicion li a {

          display: block;
          /* margin-left: 0px; */ 
          text-decoration: none;  
          padding: 1px 4px;
         
         color: black;

}



/* para sobrear el menu*/
.posicion li a:hover {

    background-color: gray;

 /*  background-color: #434343; */

}
*/

/*mover la forma de desplegar los "li" de los menus */

.posicion > li {

     float: left;


}




/*Para ocultar el menu desplegable*/
.posicion li ul {

    display: none; 
    position: absolute;
    min-width: 100px;

    margin-top: 1%;

}



/*Ajuste para que aparezca el block del menu cuando se pase el mouse*/

.posicion li:hover > ul {
  
   display: block;
   


}


/*configurar directamente los items del ultimo nivel de <li> del menu de opciones */

#menu li ul > li {

                  width: 160px;
	list-style: none;
                  font: bold 14px arial;
	padding: 1px 1px 1px;
	
	/* background: gray; */ 
                /* text-align: left; */
	
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;

                  padding-top: 1%;
                  padding-bottom: 1%;

                


}







/*Control del nuevo menu abrir y cerrar*/
/*nueva configuracion para el empleo del menu */
ul.posicion {

	height: 0;
	overflow: hidden;
                  
                
                

}

/*Definir el largo del despliegue del menu */
#menu:target .posicion {

	height: 8em;

}


.close {

	display: none;

}

#menu:target .open {

	display: none;

}


#menu:target .close {

	display: block;

}


/*Ajuste del texto abrir menu y cerrar menu*/
.control-menu {

	text-align: center;
	
}

.control-menu a {

	color: black;
	
}




/*Apartado para configurar y ajustar los menus de navegacion dentro de la pagina*/
#menu {
                 
                   display: inline-block; 
                   margin: auto;
                   width: 360px;
                  font-family: Arial, Helvetica, sans-serif;

  
                  padding-top: 1px;
                  padding-bottom: 1px;
                  color: white;
                   
	/* clear: both; */
                  background: silver;
                
	/* padding: 5px 6px; */ 
                  
                  
}


#menu ul {

     left: 1%;
      padding-left:25%;

      /* background: green; */
      padding-top: 1%;
      padding-bottom: 1%;

      text-align: center;
      
      
     

}

#menu li {
	
	
	width: 150px;
	list-style: none;
	padding: 2px;
	font: bold 12px arial;
	
	text-align: center;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

                  padding-top: 1%;
                  padding-bottom: 1%;

             /*para alinaear y centrar el menu con la palabra cerrar menu, tomar en cuenta para la posicion horizontal*/
                  margin-left: 15px;
                  
                  

}


/* ***** importante controlar las secciones de las paginas para incrustar las imagenes, tomar en cuenta que ya existe la seccion2 y seccion5 */
/* checar el proceso porque ya se desplega el menu de opciones*/
/*Confguracion del sector de section en la pagina principal (index)*/

/* seccion que ajusta a la pagina index.php*/
#seccion {
              position: relative;
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
     
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("descargaok.png");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;
       background-position: 98%;
        background-size: 100% 100%;


	height: calc(150px + 3em);
	

 
}


#seccion b {

    font: bold 17px verdana, sans-serif;

    font-weight: 900;
      
      float: left;
     margin-top: 45px;
     
      color: black;
      
     
}

/*Ajustes de menu de navegacion en la pagina index.php donde se visualiza icono de la aplicación*/
.vinetasup{

	padding-left: 100px;

}


.vineta1 {
    
    padding-left:5px;
    list-style-image: url("iconoapp80.png");
    color: black;

}

.vineta2 {
    
    padding-left:5px;
    list-style-image: url("icono_tic80.png");
    color: black;

}


/*Ajustes de menu de navegacion en la pagina cursos.php donde se visualiza listado de temarios*/
.vinetatemario{

	padding-left: 10px;

}

/*Ajustes de menu de navegacion en la pagina cursos.php donde se visualiza listado de temarios, para el segundo listado del menu*/
.vinetatemario ul > li {

	padding-left: 30px;

}


.vinetatem1 {
    
    padding-left:5px;
   
    color: black;

}

.vinetatem2 {
    
    font: bold 17px verdana, sans-serif;
    padding-left: 30px;
   
    color: black;

}

/*Configuracion del texto del regreso a pagina superior dentro del app cursos.php*/

#regreso {
	
                  
	
	padding: 3px 3px;
                  margin-left: 10px;
    
   
                 color: white;
                 font: bold 20px arial;
	
	text-align: center;
	background: blue;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

}




/* seccion que ajusta a la pagina apppm.php*/
#seccion1 {
 
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
         
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("central.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;



 
}


#seccion1 b {

    font: bold 17px verdana, sans-serif;

    font-weight: 900;
      text-align: center; 
    
     margin-top: 45px;
     
      color: white;
      
     
}

/* seccion que ajusta a la pagina cursos.php*/
#seccion3 {
 
              width: 100%
       

           margin-top: 1px;
           margin-bottom: 3px;
      
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("capacita.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;



 
}


#seccion3 b {

    
    font: bold 17px verdana, sans-serif;

    font-weight: 900;
     // text-align: center; 
      float: left;
     margin-top: -65px;
     margin-left: 65px;
      color: red;
      
     
}



/* seccion que ajusta a la pagina apptic.php*/
#seccion4 {
 
              width: 100%
        

           margin-top: 1px;
           margin-bottom: 3px;
     
         


           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("admon_ti.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;



 
}


#seccion4 b {

    
    font: bold 17px verdana, sans-serif;

    font-weight: 900;
     // text-align: center; 
      float: left;
     margin-top: 20px;
     margin-left: 30px;
      color: blue;
      
     
}





/*Permite ajustar tanto el titulo como el contenido de los servicios o productos que se venden, dato que va después de cada titulo indicado debajo de cada sección*/
/*Tomar como referencia para las otras paginas que se tengan y que sean del mismo contexto*/
.titulo {
  
    text-align: justify;
    padding-left: 12px;
    margin-right: 8px;
}

/*Ajustar el titulo de los servicios o productos que se venden, dato que va después de cada imagen de sección*/

.titulo d {
     font: bold 16px verdana, sans-serif;
    


}


/*Ajustar el contenido de los servicios o productos que se venden, dato que va después de cada imagen de sección*/

.titulo e {
     font: 16px verdana, sans-serif;
    

}


/*Area para definir los ajustes para la galeria de imagenes*/

.galeria {
	position: relative;
	display: block;
	margin-left: 15px;
                  margin-right: 15px;
	margin-top: 5px;
                  border: 1px solid #555;

	height: calc(430px + 3em);
	widht: 300px;

	



}



.galeria img {

	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	//transition: opacity .1s;

}


.galeria input[type="radio"] {

	position: relative;
	bottom: calc(-430px - 1.5em);
	left: 2em;
      
                  margin-left: 3px;


}


.galeria input[type="radio"]:nth-of-type(1):checked ~ img:nth-of-type(1) {
	opacity: 1;

}

.galeria input[type="radio"]:nth-of-type(2):checked ~ img:nth-of-type(2) {
	opacity: 1;

}


.galeria input[type="radio"]:nth-of-type(3):checked ~ img:nth-of-type(3) {
	opacity: 1;

}

.galeria input[type="radio"]:nth-of-type(4):checked ~ img:nth-of-type(4) {
	opacity: 1;

}

.galeria input[type="radio"]:nth-of-type(5):checked ~ img:nth-of-type(5) {
	opacity: 1;

}

.galeria input[type="radio"]:nth-of-type(6):checked ~ img:nth-of-type(6) {
	opacity: 1;

}

.galeria input[type=radio]:nth-of-type(7):checked ~ img:nth-of-type(7) {
	opacity: 1;

}

.galeria input[type="radio"]:nth-of-type(8):checked ~ img:nth-of-type(8) {
	opacity: 1;

}


.galeria input[type="radio"]:nth-of-type(9):checked ~ img:nth-of-type(9) {
	opacity: 1;

}

.galeria input[type="radio"]:nth-of-type(10):checked ~ img:nth-of-type(10) {
	opacity: 1;

}

.galeria input[type="radio"]:nth-of-type(11):checked ~ img:nth-of-type(11) {
	opacity: 1;

}

.galeria input[type="radio"]:nth-of-type(12):checked ~ img:nth-of-type(12) {
	opacity: 1;

}




/*Ajuste de todos los form "formularios" de las paginas */

form {

      background: orange;
   
    border: 2px solid red;
    
    margin-left: 2px;
    margin-right: 2px;

}


form input {
        width: 180px;
      
    height: 30px;
    margin: 1px 1px;
    padding: 0px 10px;
    text-align: center;
    background-color: yellow;



}




/*Para configurar la posicion, color y ancho de los datos de telefono de la empresa*/
marquee {
     
     width: 80%;
     height= 30%;
     font: bold 20px verdana, sans-serif;
     background-color: yellow;
    margin-top: 5px;
     
      
}



/*Control de las secciones donde se define el contenido del temario de los cursos */

#seccion2 {
 
           
           width: 95%;
           margin-top: 3px;
          

           margin-bottom: 3px;
           margin-left: 2%;
      
           border: 2px solid blue;

                background: yellow;
	//background: #F7BFBE;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
             text-align: justify;
    

 
}




/*Para controlar la configuración de las imagenes de las fichas tecnicas, que nos envio la empresa Beleffic*/
/* para controlar las imagenes que se van presentando el parte inferior de las paginas index y apptic */
#seccion5 {
 
           //position: relative;
           width: 305%;
           margin-top: 20%;
           margin-bottom: 3px;
          margin-left: -207%;
      
         
	background: #F7BFBE;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;

          
}




/*configuración y control de las tablas de presentacion*/


/*pudiera no estar esta configuracion de #tabla*/
/*para la tabla que se emplea dentro de la opcion de selección de opciones */
#tabla {
       
        
     color: red;
     

}

/*ajustes para las tablas donde se seleccionan las imagenes*/

.normal {

        width: 100%;
        border: 2px solid white; 
         border-spacing: 5px;
         
   
}

.normal th, .normal td {
            border: 2px solid white; 
            border-spacing: 5px;
             font-weight: bold;

              font: bold 12px verdana, sans-serif;
                  
               background: #3EAEB1;
              
                  text-align: center;
                  color: white;
}


/*ajustes para la tabla de opciones de cotizacion de los cursos APP y la pagina de dudas*/

.opcion {

        width: 100%;
        border: 2px solid white; 
    
         border-spacing: 2px;
   
}



.opcion td {
          
           // width: 1%;
            border: 2px solid white; 
            border-spacing: 1px;
             font-weight: bold;

              font: bold 18px verdana, sans-serif;
                  
              
             background: #6B4226; 
               
                  text-align: left;
                  color: white;
}



/*ajustes para las tables del formulario para capturar los datos del cliente */

.basico {

        width: 100%;
        border: 1px solid white; 
    
         border-spacing: 2px;
   
}

.basico th {

            width: 100%;
            border: 2px solid white; 
            border-spacing: 1px;
             font-weight: bold;

              font: bold 16px verdana, sans-serif;
                  
              
              background: #6B4226;
              
                  text-align: center;
                  color: white;
}

.basico td {
          
            width: 100%;
            border: 1px solid white; 
            border-spacing: 1px;
             font-weight: bold;

              font: bold 12px verdana, sans-serif;
                  
              
             background: #6B4226; 
               
                  text-align: left;
                  color: white;
}





/*ajustes para las tablas de los cursos de capacitacion*/

.unico {

        width: 100%;
        border: 2px solid white; 
         border-spacing: 0px;
         
   
}

.unico th {

            width: 90%;
            border: 2px solid white; 
            border-spacing: 0px;
             font-weight: bold;

              font: bold 12px verdana, sans-serif;
                  
              
              //background: #6B4226;
              background: #3EAEB1;

                  text-align: center;
                  color: white;
}

.unico td {

            width: 90%;
            border: 2px solid white; 
            border-spacing: 0px;
             font-weight: bold;

              font: bold 12px verdana, sans-serif;
                  
              
             background: #6B4226; 
               
                  text-align: justify;
                  color: white;
}












#piefinal {

	clear: both;
	width: 90%;
	text-align: center;
	padding:10px;
	border-top: 5px solid brown;

                  background: grey;
	//background: #FFC0CB;
	margin: auto auto;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}



/* ************************************************************ */
/* ************************************************************ */

/*Para todo tipo de smarphone en posicion horizontal*/




@media (max-width:598px) and (orientation:landscape) { 


/*Definir el largo del despliegue del menu */
#menu:target .posicion {

	height: 9em;

}


/*Apartado para configurar y ajustar los menus de navegacion dentro de la pagina*/
#menu {
                 
                   display: inline-block; 
                   margin: auto;
                   width: 598px;
                  font-family: Arial, Helvetica, sans-serif;

  
                  padding-top: 1px;
                  padding-bottom: 1px;
                  color: white;
                   
	/* clear: both; */
                  background: silver;
                
	/* padding: 5px 6px; */ 
                  
                  
}

#menu li {
	
	
	width: 150px;
	list-style: none;
	padding: 2px;
	font: bold 12px arial;
	
	text-align: center;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

                  padding-top: 1%;
                  padding-bottom: 1%;

             /*para alinaear y centrar el menu con la palabra cerrar menu, tomar en cuenta para la posicion horizontal*/
                  margin-left: 72px;
                
                  

}





/*Confguracion del sector de section en la pagina principal (index)*/

/* seccion que ajusta a la pagina index.php*/
#seccion {
              position: relative;
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
     
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("descargaok.png");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;
       background-position: 98%;
        background-size: 100% 100%;


	height: calc(200px + 3em);
	

 
}


#seccion b {

    font: bold 17px verdana, sans-serif;

    font-weight: 900;
      
      float: left;
     margin-top: 100px;
     
      color: black;
      
     
}

/* seccion que ajusta a la pagina apppm.php*/
#seccion1 {
 	  position: relative;
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
         
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("central.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;
	
         height: calc(200px + 3em);


 
}


#seccion1 b {
	
    font: bold 17px verdana, sans-serif;

    font-weight: 900;
      
     float: left;
    margin-top: 100px;
    margin-left: 140px;
     
      color: white;
      
     
}


/* seccion que ajusta a la pagina cursos.php*/
#seccion3 {
               position: relative;
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
       
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("capacita.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;
           height: calc(200px + 3em);


 
}


#seccion3 b {

    
    font: bold 17px verdana, sans-serif;

    font-weight: 900;
    
      float: left;
     margin-top: -56px;
     margin-left: 230px;
      color: red;
      
     
}






/* seccion que ajusta a la pagina apptic.php*/
#seccion4 {
             position: relative;
              width: 100%
      
           margin-top: 1px;
           margin-bottom: 3px;
          
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("admon_ti.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;
       height: calc(200px + 3em);

}


#seccion4 b {

    
    font: bold 17px verdana, sans-serif;

    font-weight: 900;
    
      float: left;
     margin-top: 100px;
     margin-left: 140px;
      color: blue;
      
     
}


.galeria {
	position: relative;
	display: block;
	margin-left: 134px;
                  margin-right: 134px;
	margin-top: 5px;
                  border: 1px solid #555;

	height: calc(430px + 3em);
	widht: 100px;

	


}

.galeria img {

	position: absolute;
	top: 38px;
	left: 0;
	opacity: 0;
	//transition: opacity .1s;

}




.galeria input[type="radio"] {

	position: relative;
                  

	bottom: calc(10px - 1.5em);
	
	 left: 2em; 
      
                  margin-left: 3px; 


}


/*Termina o Cierra la función media, para la posicion horizontal de telefonos smarphone*/
}


/* ************************************************************ */
/* ************************************************************ */

/*Para iphone 6s en posicion vertical*/




@media (min-width:375px) and (max-width:767px) and (orientation:portrait) {




/*Apartado para configurar y ajustar los menus de navegacion dentro de la pagina*/
#menu {
                 
                   display: inline-block; 
                   margin: auto;
                   width: 375px;
                  font-family: Arial, Helvetica, sans-serif;

  
                  padding-top: 1px;
                  padding-bottom: 1px;
                  color: white;
                   
	/* clear: both; */
                  background: silver;
                
	/* padding: 5px 6px; */ 
                  
                  
}

/*Ajuste para el texto de la pagina de cursos.php*/
#seccion3 b {

    
    font: bold 17px verdana, sans-serif;

    font-weight: 900;
    
      float: left;
     margin-top: -66px;
     margin-left: 40px;
      color: red;
      
     
}

/*Area para definir los ajustes para la galeria de imagenes*/

.galeria {
	position: relative;
	display: block;
	margin-left: 23px;
                  margin-right: 22px;
	margin-top: 5px;
                  border: 1px solid #555;

	height: calc(430px + 3em);
	widht: 300px;

	



}


.galeria input[type="radio"] {

	position: relative;
	bottom: calc(-430px - 1.5em);
	left: 2.5em;
      
                  margin-left: 3px;


}




/*Termina o Cierra la función media, para la posicion vertical de telefonos iphone 6s*/
}




/* ************************************************************ */
/* ************************************************************ */

/*Para iphone 6s en posicion horizontal*/

@media (min-width:667px) and (max-width:1023px) and (orientation:landscape) {


/*Definir el largo del despliegue del menu */
#menu:target .posicion {

	height: 10em;

}



/*Apartado para configurar y ajustar los menus de navegacion dentro de la pagina*/
#menu {
                 
                   display: inline-block; 
                   margin: auto;
                   width: 667px;
                  font-family: Arial, Helvetica, sans-serif;

  
                  padding-top: 1px;
                  padding-bottom: 1px;
                  color: white;
                   
	/* clear: both; */
                  background: silver;
                
	/* padding: 5px 6px; */ 
                  
                  
}

#menu li {
	
	
	width: 150px;
	list-style: none;
	padding: 2px;
	font: bold 12px arial;
	
	text-align: center;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

                  padding-top: 1%;
                  padding-bottom: 1%;

             /*para alinaear y centrar el menu con la palabra cerrar menu, tomar en cuenta para la posicion horizontal*/
                  margin-left: 90px;
              
                  

}


/*Confguracion del sector de section en la pagina principal (index)*/

/* seccion que ajusta a la pagina index.php*/
#seccion {
              position: relative;
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
     
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("descargaok.png");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;
       background-position: 98%;
        background-size: 100% 100%;


	height: calc(230px + 3em);
	
}


#seccion b {

    font: bold 20px verdana, sans-serif;

    font-weight: 900;
      
      float: left;
     margin-top: 120px;
     margin-left: 20px;     
      color: black;
      
     
}

/* seccion que ajusta a la pagina apppm.php*/
#seccion1 {
 	  position: relative;
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
         
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("central.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;
	
         height: calc(230px + 3em);


 
}


#seccion1 b {
	
    font: bold 20px verdana, sans-serif;

    font-weight: 900;
      
     float: left;
    margin-top: 80px;
    margin-left: 110px;
     
      color: white;
      
     
}


/* seccion que ajusta a la pagina cursos.php*/
#seccion3 {
               position: relative;
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
       
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("capacita.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;
           height: calc(230px + 3em);


 
}


#seccion3 b {

    
    font: bold 20px verdana, sans-serif;

    font-weight: 900;
    
      float: left;
     margin-top: -60px;
     margin-left: 195px;
      color: red;
      
     
}






/* seccion que ajusta a la pagina apptic.php*/
#seccion4 {
             position: relative;
              width: 100%
      
           margin-top: 1px;
           margin-bottom: 3px;
          
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("admon_ti.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;
       height: calc(230px + 3em);

}


#seccion4 b {

    
    font: bold 20px verdana, sans-serif;

    font-weight: 900;
    
      float: left;
     margin-top: 120px;
     margin-left: 140px;
      color: blue;
      
     
}

.galeria {
	position: relative;
	display: block;
	margin-left: 169px;
                  margin-right: 168px;
	margin-top: 5px;
                  border: 1px solid #555;

	height: calc(430px + 3em);
	widht: 100px;

	


}

.galeria img {

	position: absolute;
	top: 38px;
	left: 0;
	opacity: 0;
	//transition: opacity .1s;

}


.galeria input[type="radio"] {

	position: relative;
                  

	bottom: calc(10px - 1.5em);
	
	 left: 2.5em; 
      
                  margin-left: 3px; 


}






/*Termina o Cierra la función media, para la posicion horizontal de telefonos iphone 6s*/
}






/* ************************************************************ */
/* ************************************************************ */

/*Para ipad en posicion vertical*/


@media (min-width:768px) and (max-width:959px) and (orientation:portrait) {

/*Texto para indicar el nombre de la consultoria*/
h1 {

   font: bold 22px verdana, sans-serif;
   text-align: center;
  color: white;
}




/*Definir el largo del despliegue del menu */
#menu:target .posicion {

	height: 11em;

}


/*Apartado para configurar y ajustar los menus de navegacion dentro de la pagina*/
#menu {
                 
                   display: inline-block; 
                   margin: auto;
                   width: 768px;
                  font-family: Arial, Helvetica, sans-serif;

  
                  padding-top: 1px;
                  padding-bottom: 1px;
                  color: white;
                   
	/* clear: both; */
                  background: silver;
                
	/* padding: 5px 6px; */ 
                  
                  
}

#menu li {
	
	
	width: 150px;
	list-style: none;
	padding: 2px;
	font: bold 12px arial;
	
	text-align: center;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

                  padding-top: 1%;
                  padding-bottom: 1%;

             /*para alinaear y centrar el menu con la palabra cerrar menu, tomar en cuenta para la posicion horizontal*/
                  margin-left: 115px;
              
                  

}


/*Confguracion del sector de section en la pagina principal (index)*/

/* seccion que ajusta a la pagina index.php*/
#seccion {
              position: relative;
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
     
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("descargaok.png");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;
       background-position: 98%;
        background-size: 100% 100%;


	height: calc(250px + 3em);
	
}


#seccion b {

    font: bold 20px verdana, sans-serif;

    font-weight: 900;
      
      float: left;
     margin-top: 120px;
     margin-left: 45px;
     
      color: black;
      
     
}

/* seccion que ajusta a la pagina apppm.php*/
#seccion1 {
 	  position: relative;
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
         
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("central.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;
	
         height: calc(250px + 3em);


 
}


#seccion1 b {
	
    font: bold 20px verdana, sans-serif;

    font-weight: 900;
      
     float: left;
    margin-top: 80px;
    margin-left: 150px;
     
      color: white;
      
     
}


/* seccion que ajusta a la pagina cursos.php*/
#seccion3 {
               position: relative;
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
       
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("capacita.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;
           height: calc(250px + 3em);


 
}


#seccion3 b {

    
    font: bold 24px verdana, sans-serif;

    font-weight: 900;
    
      float: left;
     margin-top: -62px;
     margin-left: 210px;
      color: red;
      
     
}






/* seccion que ajusta a la pagina apptic.php*/
#seccion4 {
             position: relative;
              width: 100%
      
           margin-top: 1px;
           margin-bottom: 3px;
          
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("admon_ti.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;
       height: calc(250px + 3em);

}


#seccion4 b {

    
    font: bold 20px verdana, sans-serif;

    font-weight: 900;
    
      float: left;
     margin-top: 120px;
     margin-left: 165px;
      color: blue;
      
     
}

/*Configuracion del texto del regreso a pagina superior dentro del app cursos.php*/

#regreso {
	
                  
	
	padding: 3px 3px;
                  margin-left: 20px;
    
   
                 color: white;
                 font: bold 20px arial;
	
	text-align: center;
	background: blue;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

}








/*Area para definir los ajustes para la galeria de imagenes*/

.galeria {
	position: relative;
	display: block;
	margin-left: 219px;
                  margin-right: 219px;
	margin-top: 5px;
                  border: 1px solid #555;

	height: calc(430px + 3em);
	widht: 300px;

	



}


.galeria input[type="radio"] {

	position: relative;
	bottom: calc(-430px - 1.5em);
	left: 2em;
      
                  margin-left: 3px;


}










/*Termina o Cierra la función media, para la posicion vertical de ipad*/
}




/* ************************************************************ */
/* ************************************************************ */

/*Para ipad en posicion horizontal*/




@media (min-width:1024px) and (max-width:1704px) and (orientation:landscape) {


/*Texto para indicar el nombre de la consultoria*/
h1 {

   font: bold 22px verdana, sans-serif;
   margin-left: 10px;
  color: white;
  text-align: center;
}


/*Definir el largo del despliegue del menu */
#menu:target .posicion {

	height: 11em;

}


/*Apartado para configurar y ajustar los menus de navegacion dentro de la pagina*/
#menu {
                 
                   display: inline-block; 
                   margin: auto;
   
                   width: 1024px;
                  font-family: Arial, Helvetica, sans-serif;

  
                  padding-top: 1px;
                  padding-bottom: 1px;
                  color: white;
                   
	/* clear: both; */
                  background: silver;
                
	/* padding: 5px 6px; */ 
                  
                  
}

#menu li {
	
	
	width: 150px;
	list-style: none;
	padding: 2px;
	font: bold 12px arial;
	
	text-align: center;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

                  padding-top: 1%;
                  padding-bottom: 1%;

             /*para alinaear y centrar el menu con la palabra cerrar menu, tomar en cuenta para la posicion horizontal*/
                  margin-left: 180px;
              
                  

}


/*Confguracion del sector de section en la pagina principal (index)*/

/* seccion que ajusta a la pagina index.php*/
#seccion {
              position: relative;
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
     
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("descargaok.png");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;
       background-position: 98%;
        background-size: 100% 100%;


	height: calc(350px + 3em);
	
}


#seccion b {

    font: bold 17px verdana, sans-serif;

    font-weight: 900;
      
      float: left;
     margin-top: 220px;
     margin-left: 100px;
     
      color: black;
      
     
}

/* seccion que ajusta a la pagina apppm.php*/
#seccion1 {
 	  position: relative;
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
         
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("central.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;
	
         height: calc(350px + 3em);


 
}


#seccion1 b {
	
    font: bold 24px verdana, sans-serif;

    font-weight: 900;
      
     float: left;
    margin-top: 80px;
    margin-left: 270px;
     
      color: white;
      
     
}


/* seccion que ajusta a la pagina cursos.php*/
#seccion3 {
               position: relative;
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
       
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("capacita.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;
           height: calc(350px + 3em);


 
}


#seccion3 b {

    
    font: bold 26px verdana, sans-serif;

    font-weight: 900;
    
      float: left;
     margin-top: -50px;
     margin-left: 360px;
      color: red;
      
     
}






/* seccion que ajusta a la pagina apptic.php*/
#seccion4 {
             position: relative;
              width: 100%
      
           margin-top: 1px;
           margin-bottom: 3px;
          
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("admon_ti.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;
       height: calc(350px + 3em);

}


#seccion4 b {

    
    font: bold 24px verdana, sans-serif;

    font-weight: 900;
    
      float: left;
     margin-top: 180px;
     margin-left: 250px;
      color: blue;
      
     
}


/*Configuracion del texto del regreso a pagina superior dentro del app cursos.php*/

#regreso {
	
                  
	
	padding: 3px 3px;
                  margin-left: 25px;
    
   
                 color: white;
                 font: bold 20px arial;
	
	text-align: center;
	background: blue;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

}






/*Area para definir los ajustes para la galeria de imagenes*/

.galeria {
	position: relative;
	display: block;
	margin-left: 347px;
                  margin-right: 347px;
	margin-top: 5px;
                  border: 1px solid #555;

	height: calc(430px + 3em);
	widht: 300px;

	



}


.galeria input[type="radio"] {

	position: relative;
	bottom: calc(-430px - 1.5em);
	left: 2.5em;
      
                  margin-left: 3px;


}


/*Termina o Cierra la función media, para la posicion horizontal de ipad*/
}






/* ************************************************************ */
/* ************************************************************ */

/*Para tablet en posicion vertical*/

@media (min-width:768px) and (max-width:1559px) and (orientation:portrait) {

/*Texto para indicar el nombre de la consultoria*/
h1 {

   font: bold 22px verdana, sans-serif;
   text-align: center;
  color: white;
}

/*Definir el largo del despliegue del menu */
#menu:target .posicion {

	height: 9.5em;

}


/*Apartado para configurar y ajustar los menus de navegacion dentro de la pagina*/
#menu {
                 
                   display: inline-block; 
                   margin: auto;
                   width: 768px;
                  font-family: Arial, Helvetica, sans-serif;

  
                  padding-top: 1px;
                  padding-bottom: 1px;
                  color: white;
                   
	/* clear: both; */
                  background: silver;
                
	/* padding: 5px 6px; */ 
                  
                  
}

#menu li {
	
	
	width: 150px;
	list-style: none;
	padding: 2px;
	font: bold 12px arial;
	
	text-align: center;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

                  padding-top: 1%;
                  padding-bottom: 1%;

             /*para alinaear y centrar el menu con la palabra cerrar menu, tomar en cuenta para la posicion horizontal*/
                  margin-left: 115px;
              
                  

}





#seccion3 b {

    
    font: bold 24px verdana, sans-serif;

    font-weight: 900;
    
      float: left;
     margin-top: -55px;
     margin-left: 199px;
      color: red;
      
     
}



.galeria input[type="radio"] {

	position: relative;
	bottom: calc(-430px - 1.5em);
	left: .1em;
      
                  margin-left: 6px;


}





/*Termina o Cierra la función media, para la posicion vertical de la tablet*/
}




/* ************************************************************ */
/* ************************************************************ */

/*Para tablet en posicion horizontal*/

@media  (min-width:1366px) and (orientation:landscape) {


/*Definir el largo del despliegue del menu */
#menu:target .posicion {

	height: 12em;

}

/*Apartado para configurar y ajustar los menus de navegacion dentro de la pagina*/
#menu {
                 
                   display: inline-block; 
                   margin: auto;
   
                   width: 1349px;
                  font-family: Arial, Helvetica, sans-serif;

  
                  padding-top: 1px;
                  padding-bottom: 1px;
                  color: white;
                   
	/* clear: both; */
                  background: silver;
                
	/* padding: 5px 6px; */ 
                  
                  
}

#menu li {
	
	
	width: 150px;
	list-style: none;
	padding: 2px;
	font: bold 12px arial;
	
	text-align: center;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

                  padding-top: 1%;
                  padding-bottom: 1%;

             /*para alinaear y centrar el menu con la palabra cerrar menu, tomar en cuenta para la posicion horizontal*/
                  margin-left: 260px;
              
}


/*Confguracion del sector de section en la pagina principal (index)*/

/* seccion que ajusta a la pagina index.php*/
#seccion {
              position: relative;
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
     
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("descargaok.png");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;
       background-position: 98%;
        background-size: 100% 100%;


	height: calc(450px + 3em);
	
}


#seccion b {

    font: bold 26px verdana, sans-serif;

    font-weight: 900;
      
      float: left;
     margin-top: 270px;
     margin-left: 110px;
     
      color: black;
      
     
}

/* seccion que ajusta a la pagina apppm.php*/
#seccion1 {
 	  position: relative;
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
         
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("central.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;
	
         height: calc(450px + 3em);


 
}


#seccion1 b {
	
    font: bold 30px verdana, sans-serif;

    font-weight: 900;
      
     float: left;
    margin-top: 80px;
    margin-left: 320px;
     
      color: white;
      
     
}


/* seccion que ajusta a la pagina cursos.php*/
#seccion3 {
               position: relative;
              width: 100%
        
           margin-top: 1px;
           margin-bottom: 3px;
       
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("capacita.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;
           height: calc(450px + 3em);


 
}


#seccion3 b {

    
    font: bold 32px verdana, sans-serif;

    font-weight: 900;
    
      float: left;
     margin-top: -35px;
     margin-left: 505px;
      color: red;
      
     
}






/* seccion que ajusta a la pagina apptic.php*/
#seccion4 {
             position: relative;
              width: 100%
      
           margin-top: 1px;
           margin-bottom: 3px;
          
           text-align: center;

          /*Imagen de fondo que se incrusta en la seccion*/   
       background-image: url("admon_ti.jpg");
       background-repeat: no-repeat; 
       background-size: 50%;
        background-color: white;

       background-position: 98%;
        background-size: 100% 100%;
       height: calc(450px + 3em);

}


#seccion4 b {

    
    font: bold 30px verdana, sans-serif;

    font-weight: 900;
    
      float: left;
     margin-top: 240px;
     margin-left: 345px;
      color: blue;
      
     
}

/*Area para definir los ajustes para la galeria de imagenes*/

.galeria {
	position: relative;
	display: block;
	margin-left: 510px;
                  margin-right: 509px;
	margin-top: 5px;
                  border: 1px solid #555;

	height: calc(430px + 3em);
	widht: 300px;

	



}



.galeria input[type="radio"] {

	position: relative;
	bottom: calc(-430px - 1.5em);
	left: .1em;
      
                  margin-left: 10px;


}



/*Termina o Cierra la función media, para la posicion horizontal de la tablet*/
}