@font-face {
  font-family: "oleo-script";
  src: url("../fonts/Oleo_Script_Swash_Caps/OleoScriptSwashCaps-Regular.ttf")
    format("truetype");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "exo";
  src: url("../fonts/Exo_2/Exo2-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "exo";
  font-size: 1.5vw;
}

.principal {
  font-family: "oleo-script";
  width: 100%;
  height: 100vh;
  background: url("../img/colpos.jpg") no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100%;
  padding-top: calc(50vh - 50px);
}

.titulo {
  display: none;
  background-color: #0034a5ab;
  border: solid 2px #d8a50d;
  border-radius: 5px;
  color: #f3ca4c;
  width: 75vw;
  height: 80px;
  margin: auto;
  font-size: 2.5vw;
  font-weight: bold;
  text-align: center;
  line-height: 80px;
  -webkit-text-stroke: 0.5px #2c2100;
  text-shadow: 3px 3px 5px, -3px 3px 5px, 3px -3px 5px, -3px -3px 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.info-text {
  width: 90%;
  height: 75 vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: auto;
  align-items: center;
  text-align: center;
}

.imga {
  margin: 0;
  margin-top: 30px;
}

.imagen {
  border: solid 5px #d8a50d;
  box-shadow: 3px 3px 10px #2c2100;
}

.texto {
  margin: 30px;
  line-height: 25px;
  text-align: justify;
}

.registro {
  width: 100%;
  height: 40vh;
  text-align: center;
  margin: auto;
  margin-top: 50px;
  line-height: 50px;
}

.ingreso {
  color: #2c2c2c;
  border: solid 3px #d8a50d;
  border-radius: 5px;
  padding: 10px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 3px 3px 3px #2c2c2c, 3px 3px 3px #2c2c2c, 3px 3px 3px #2c2c2c;
  transition: 0.5s ease;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  -ms-transition: 0.5s ease;
  -o-transition: 0.5s ease;
}

.ingreso:hover {
  background-color: #2c2100;
  color: #d8a50d;
}

/***************** seccion circulos ********************/

.circulos {
  /* width: 100%; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  margin: 70px 0;
}

.uno,
.dos,
.tres {
  border: solid 5px #2c2100;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.image-circle {
  max-width: 175%;
}

/********************** SECCIÓN PROGRAMA ****************/
.programa {
  margin-top: 100px;
  margin-bottom: 100px;
}

.titulo-gra {
  margin: 30px 0;
  text-align: center;
  color: #2c2100;
  text-shadow: 3px 3px 5px #241b01;
}

/***************** HOJA DE REGISTRO *********************/
.banner {
  background-color: #696868;
  color: #0664df;
  font-size: 2.5vw;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 10px #836302;
  height: 100px;
  line-height: 100px;
  -webkit-text-stroke: 0.1px #ffffff;
}

.encabezado {
  text-align: center;
  margin: 30px 0;
}

.formulario {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr;
}

.forms {
  max-width: 80vw;
  margin: auto;
}

fieldset {
  padding: 20px;
  /* align-items: center; */
}

.input-form {
  width: 90%;
  height: 6vh;
  color: #0300a3;
  font-weight: bold;
  border: 0;
  outline: 0;
  border-radius: 20px;
  background-color: transparent;
  padding: 10px;
  box-shadow: inset 3px 3px 5px #00003f, inset -5px -5px 10px #5f91d1;
  transition: 0.5s ease-in;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  -webkit-transition: 0.5s ease-in;
  -moz-transition: 0.5s ease-in;
  -ms-transition: 0.5s ease-in;
  -o-transition: 0.5s ease-in;
}
/* .input-form {
  width: 90%;
  height: 5vh;
  border: solid 2px #0664df;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
} */

.input-form:focus {
  color: #0004fd;
  font-weight: bold;
  outline: none;
  box-shadow: inset 1px 1px 2px #00003f, inset 1px 1px 3px #0664df;
}

label {
  padding: 10px;
}

.botones {
  text-align: center;
}

.btn-enviar {
  background-color: transparent;
  color: #0004fd;
  font-size: 1.5vw;
  font-weight: bold;
  border: 0;
  border-radius: 20px;
  padding: 10px;
  transition: 0.5s ease;
  cursor: pointer;
  margin: 30px 20px;
  box-shadow: -5px -5px 15px #0664df, 5px 5px 15px #00003f;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  -ms-transition: 0.5s ease;
  -o-transition: 0.5s ease;
}

.btn-enviar:hover {
  color: #00003f;
  box-shadow: -1px -1px 3px #00003f, 1px 1px 5px #0664df;
}

.btn-limpiar {
  background-color: transparent;
  color: #ff0000;
  font-size: 1.5vw;
  font-weight: bold;
  border: 0;
  border-radius: 20px;
  padding: 10px;
  transition: 0.5s ease;
  cursor: pointer;
  box-shadow: -5px -5px 15px #7c0000, 5px 5px 15px #ff0000;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}

.btn-limpiar:hover {
  color: #8a0000;
  box-shadow: -1px -1px 3px #ff0000, 1px 1px 5px #7c0000;
}

/************************** ver *****************************/
.tabla {
  border: solid 1px black;
  margin: auto;
  width: 90%;
  font-size: 1.5vw;
  text-align: center;
  text-transform: uppercase;
}

thead {
  background-color: #3f0000;
  color: whitesmoke;
}

.datos {
  text-align: center;
}

.datos-u {
  font-size: 1.5rem;
  font-weight: bold;
}

.tabla-e {
  margin: 0 auto;
}

tbody tr:nth-child(odd) {
  background-color: #802323cb;
  color: #ffffff;
}

tbody tr:nth-child(even) {
  background-color: #f8c6c6;
}

table {
  background-color: #e94242;
}

.editar {
  color: #064900;
  font-weight: bold;
  text-decoration: none;
  transition: 0.5s ease all;
}

.editar:hover {
  color: #eb5600;
}

/********************** VER REGISTRO ************************/
.regexito {
  text-align: center;
}

.generales {
  margin: 0;
  margin-top: 30px;
  min-height: 70vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 20vh);
  grid-template-areas:
    "datos1 datos1 datos1 datos1"
    "datos2 datos2 datos2 datos2"
    "datos3 datos3 datos3 datos3"
    "datos4 datos4 datos4 datos4";
}

.datos1 {
  grid-area: datos1;
}

.datos2 {
  grid-area: datos2;
}

.datos3 {
  grid-area: datos3;
}

.datos4 {
  grid-area: datos4;
}

.matri,
.mail {
  color: #d8a50d;
  font-weight: bold;
}

.muestra {
  text-align: center;
  padding: 5px;
}

th,
td {
  padding: 10px;
  width: 400px;
}

.muestra td {
  color: #ffffff;
  font-weight: bold;
}

.thanks {
  margin-bottom: 25px;
  text-align: center;
  color: #d8a50d;
  font-weight: bold;
  font-size: 2vw;
  text-align: center;
  text-shadow: 3px 3px 4px #2c2100, 3px -3px 4px #2c2100;
}

.back-home {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.btn-bck {
  text-transform: none;
  text-decoration: none;
  font-weight: bold;
  color: #d8a50d;
  background-color: #2c2100;
  border: solid 3px #d8a50d;
  border-radius: 5px;
  padding: 5px 15px;
  box-shadow: 3px 3px 3px #2c2c2c, 3px 3px 3px #2c2c2c, 3px 3px 3px #2c2c2c;
  transition: 0.4s ease-in;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-transition: 0.4s ease-in;
  -moz-transition: 0.4s ease-in;
  -ms-transition: 0.4s ease-in;
  -o-transition: 0.4s ease-in;
}

.btn-bck:hover {
  background-color: #d8a50d;
  color: #2c2100;
  border: solid 3px #2c2100;
}

.btn-back {
  background-color: #ff8800;
  border: solid 3px #00003f;
  border-radius: 7px;
  color: #3700b6;
  text-decoration: none;
  padding: 7px;
  transition: 0.3s ease-in-out;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -ms-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
}

.btn-back:hover {
  background-color: #00003f;
  border: solid 3px #ff8800;
  color: #ffffff;
}

/* DATOS TOGAS */
.datos-generales {
  margin: 0;
  margin-top: 30px;
  min-height: 20vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 5vh);
  grid-template-areas:
    "muestra1 muestra2 muestra3 muestra4"
    "muestra5 muestra6 muestra7 muestra8";
}

.muestra1 {
  grid-area: muestra1;
}

.muestra2 {
  grid-area: muestra2;
}

.muestra3 {
  grid-area: muestra3;
}

.muestra4 {
  grid-area: muestra4;
}
.muestra5 {
  grid-area: muestra5;
}

.muestra6 {
  grid-area: muestra6;
}

.muestra7 {
  grid-area: muestra7;
}

.muestra8 {
  grid-area: muestra8;
}

.datos-complementos {
  margin: 0;
  margin-top: 30px;
  min-height: 20vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 5vh);
  grid-template-areas:
    "muestra9 muestra10"
    "muestra11 muestra12";
}

.muestra9 {
  grid-area: muestra9;
}

.muestra10 {
  grid-area: muestra10;
}

.muestra11 {
  grid-area: muestra11;
}

.muestra12 {
  grid-area: muestra12;
}

/********************  *******************/
.program {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 50px 0;
}

.image-program {
  margin: 0 auto;
}
.img-p {
  width: 100%;
  margin: 0 auto;
  box-shadow: 3px 3px 10px #520000, 3px -3px 10px #520000;
}

/********** Pie de página ***********/
footer {
  max-width: 100%;
  height: 15vh;
  background-color: #7c7c7c;
  font-size: 1vw;
  text-align: center;
  padding: 15px;
}

/* SECTION TABLA EXCEL */
.tablaexcel {
  width: 100%;
  font-size: 1vw;
}

.cerrado {
  color: #3f0000;
  font-weight: bold;
}

.cabecera {
  text-align: center;
  margin: 30px 0;
  color: #2c0000;
  text-shadow: 2px 2px 3px #3f0000;
}

/********************* responsive ***********************/
@media (max-width: 767.98px) {
  body {
    font-size: 3vw;
  }

  .info-text {
    display: grid;
    grid-template-rows: 30vh 70vh;
    grid-template-columns: 1fr;
  }

  .imagen {
    max-width: 50%;
    margin-top: 50px;
  }

  .circulos {
    display: none;
  }
}

@media (max-width: 918px) {
  .uno,
  .dos,
  .tres {
    width: 150px;
    height: 150px;
    overflow: hidden;
  }
}