/*Configuraciones globales*/
*{
    margin: 0px;
    padding: 0px;
}
/*En esta parte vamos a fijar un fondo con imagen y la fuente de nuestra web, así como también algunos ajustes más*/
body{
    /*Fondo de la página*/
    background: lightskyblue;
    /*Referencias de la imagen de fondo*/
    background-image: url(../imágenes/FondoFK.png);
    /*En caso de que fuera muy pequeña la imagen y se repita para llenar*/
    background-repeat: no-repeat;
    /*Centra la imagen*/
    background-position: center center;
    /*Altura de la imagen*/
    height: 100%;
    /*Repara posibles estados de posesión de la imagen, que no se ancla a la página*/
    background-attachment: fixed;
    /*Tamaño de la imagen*/
    background-size: 100%;
    /*Fija las fuentes a utilizar*/
    font-family: Arial;
    color: midnightblue;
    font-size: medium;
}
/*Se le da formato al contenedor de todo el texto*/
#container{
    /*Fija el tamaño*/
width: 100%;
/*Fija márgenes*/
margin: 2px auto;
/*Fija los bordes*/
border: 1px solid midnightblue;


}
/*Darle estilo al título o cabecera*/
header{
    /*Fija el color de fondo*/
    /*background-color: lightskyblue;*/
    /*Fija la altura*/
    height: 100px;
    /*Fija la anchura*/
    width: 100%;
    /*fija los márgenes*/
    margin: 0px;
    /*Alinea el texto verticalmente*/
    text-align: center;
    /*Fija la alineación horizontalmente*/
    line-height: 100px;
    /*Tamaño de la fuente*/
    font-size: 20px;
     /*Ajusta las sombras de letras*/
    /*text-shadow: 2px 0 white, 0 2px white, 2px 0 white, 0 2px white;*/
    max-width: 1595px;

  
}
/*Esta parte serán las visualizaciones de estilos de los menús o links*/
nav{
    /*Fija la alineación verticalmente*/
    text-align: center;
    /*Fija el fondo*/
    /*background-color: midnightblue;*/
    /*Fija la altura*/
    height: 100px;
    /*Fija la alineación horizontalmente*/
    line-height: 50px;
    /*Tamaño de la fuente*/
    font-size: 25px;
    color: whitesmoke;
    /*Ajusta las sombras de letras*/
    /*text-shadow: 2px 0 white, 0 2px white, 2px 0 white, 0 2px white;*/
    /*Fija lo máximo permitido de anchura*/
    max-width: 1595px;
}

/*Continua los formatos de los menús*/
/*Para que los menús o link se le de estilos*/
nav ul li{
    /*Permite clasificarlo a la izquierda*/
    float: left;
    /*Fija la Lista de los estilos*/
    list-style: none;
    /*Fija los márgenes*/
    margin: 38px;
    /*Fija la alineación horizontal o de altura*/
    line-height: 30px;
   

}
/*Se utiliza para evitar que los elementos floten hacia arriba*/
.clearfix{
    clear: both;
}
/*Esta parte será el contenedor de los artículos, para cambiar el fondo o transparentarlo, así como fijar su tamaño y bordes*/

#h1{
    margin-left: 200px;
    text-align: center;
    align-content: center;
}

#content{
    /*Permite la clasificación a la izquierda*/
float: left;
/*Fija la altura calculando los margenes*/
width: calc(80% - 40);
/*Fija el fondo de trasparencia*/
background-color: rgb(255, 255, 255, 0.6);
min-height: 400px;
padding: 8px;
/*Tamaño de la fuente*/
font-size: 25px;
color: whitesmoke;
 /*Ajusta las sombras de letras*/
text-shadow: 2px 0 white, 0 2px white, 2px 0 white, 0 2px white;
}



/*Sera el id de los formulario*/
#formul{
/*Fija el ancho del formulario*/
    width: 1320px;
/*Alinea el contenido*/
    align-content: center;
    
}

/*Será la tabla del formulario*/
table{
/*Sirve para que los bordes se unan o colapsen*/
    border-collapse: collapse;
/*Clasifica el lado de abajo*/
    caption-side: bottom;
/*Fija los márgenes izquierdos, para centrar la table*/
    margin-left: auto;
/*Fija los márgenes derechos, para centrar la table*/
    margin-right: auto;

}

#tit{
text-align: center;
}   

th, td{
/*Fija el color de las celdas o relleno*/
background-color: white;
opacity: 80%;
/*Fija el color del bordeado de las celdas y le da color*/
border: 1px solid black;
/*Alinea los margenes derechos*/
padding-right: 1px;
/*Alinea los márgenes izquierdos*/
padding-left: 1px;
text-align: center;
}


/*Sera para el tamaño de la fuente*/
  html {
	font-size: 12px;
}


/*Formato para misión, visión y valores*/
#MVV{
    margin-top: 180px;
    padding-left: 30px;
    padding-right: 30px;
text-align: center;

background-color: blanchedalmond;
opacity: 70%;
}

.containerRegistro {
    text-align: center;
    opacity: 85%;
    border-radius: 5px;
    background-color: blanchedalmond;
    padding: 20px;
    width: 30%;
    margin: auto
  }

#t3{
    margin-top: 10px;
    text-align: center;
}

#insc{
    margin-top: 50px;
    font-weight: bold;
    text-align: justify;
    background-color: blanchedalmond;
    padding-left: 200px;
    padding-right: 200px;
}
 
.btn_log .btn-login {
    border-radius:30px;
    padding:10px 20px;
    font-size:14px;
    font-weight:bold;
    background-color:#3f93ff;
    border:none;
    color:white;
    margin-top:20px;
    width: 100%
}

@media (max-width: 576px) {
    .containerRegistro form {
      padding:50px 20px;
    }
  }
 
input[type=submit]:hover {
    text-align: center;
    background-color: slateblue;
  }

input[type=reset]:hover {
      background-color: steelblue;
    }

#imgUbic{
        width: 500px;
        height: 250px;
    }

#ch4{
        margin-top: 30px;
        text-align: center;
        background-color: blanchedalmond;
        opacity: 80%;
        margin-left: 100px;
        margin-right: 100px;
    }


#ch3{
        margin-top: 0px;
        text-align: center;
    }

#cI{
        
        text-align: center;
    }

#contacto{
        margin-left: 100px;
        margin-right: 100px;
        text-align: left;
        background-color: blanchedalmond;
        opacity: 80%;
    }


    #tablaCI{
        margin-top: 0px;
    }

/*Formato para el pie de página*/
footer{
    /*Fija la transparencia*/
    /*background-color: rgba(1, 1, 70, 0.2);*/
   /*Fija el color de letras*/
    color: midnightblue;
    /*Alinea el texto verticalmente*/
    text-align: center;
    /*Fija la altura*/
    height: 410px;
    /*Fija la alineación horizontal o de altura*/
    line-height: 50px;
    /*Cursiva y negrita*/
    font-style: italic; 
    font-weight: bold; 
    margin-top: 300px;
}

/*Estilo para los mensajes de las validaciones de la solicitud de registro*/ 
.aviso{
    text-align: center;
    font-weight: bold;
    color: red;
    margin-top: 10px;
   
}

/*se usa float para alinear los div*/
#div-Mis{
    width: 15%;
    float: left;
    margin-top: 150px;
    margin-right: 15px;
}

#div-Vis{
    width: 15%;
    float: left;
    margin-top: 150px;
    margin-left: 320px;
    margin-right: 15px;
}

#div-Val{
    width: 15%;
    float: left;
    margin-top: 150px;
    margin-right: 30px;
}

/*Formato a las imágenes de misión, visión y valores*/
#mision{
    width: 100%;
    height: 170px;
}
#vision{
    width: 100%;
    height: 170px;
}
#valores{
    width: 100%;
    height: 170px;
}

#fo-in{
    margin-top: 350px;
}

.t_footer{
    margin-top: 50px;
}

/* inicio del estilo para la ventana popup */

.divPopup {
  display: none; /* Oculto por defecto  */
  position: fixed; 
  z-index: 1; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  overflow: auto; 
  background-color: grey; 
  opacity: 90%;
}


.popupContenido {

  margin: auto;
  padding: 20px;
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*estilo de contenedor de formulario*/
.form1 {
  width: 70%;
  padding: 10px;
  background-color: rgb(183, 207, 241);
  border: 1px solid #888;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
}

/* estilo inputs text */
.form1 input{
font-size:14px;
border:solid 1px black;
border-radius: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
float: right;
margin-right: 15px;
width: 200px;
height: fit-content;
}


.form1 input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/*estilo para los  buttons formulario */
.form1 .btn {
  background-color: darkblue;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  border-radius: 30px;
  font-size: 14px;
 
}


.form1 ol li {
line-height: 25px;
list-style: none;
}

.form1 ol {
padding-bottom: 15px;
    
    }
#h4form{
text-align: center;
padding-bottom: 11px;
}
#divBoton{

    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 30px;

}
/* estilo para el boton de abrir popup*/
#abrirPopup{
    background-color: darkblue;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
        margin-top: 12px;
      margin-left: 20px;
      margin-right: 60px;
}
/* fin del estilo para la ventana popup */