/*Variables de colores*/
:root {
    /*Cambiar este valor de acuerdo a los colores corporativos de la empresa*/
    /*Este es un logro de alta ingeniería que nadie había querido hacer por pereza
    disfrute cambiando una línea en vez de 5 o 6 regadas por todo el código.
    Saludos de su buen amigo Daniel Soto*/
    --background-color: #2E88C4; 
    --font-family: Arial;
}

body {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 10px; }

* {
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px; }

/*td {
     padding-left : 0.5em;
     padding-right:  0.5em;
     padding-top: 0.2em;
     padding-bottom:0.2em;
}*/

h2 {
    margin-top:1em;
}
/*barner mensaje*/
.fallo {
  background-color: #F2DEDE; /*rojo*/
  color:#A94442;
}

.informacion {
  background-color: #DFF0D8; /*Verde*/
  color: #135a01;
}

.alert {
  background-color: #afc8ff; /*Azul*/
  color: #272ead;
}

.barnerAlerta {
  margin-top: 0.5em;
  border-radius: 0px;
  height: 1.5em;
  font-size:1.2em;
  text-align:center;
  
  vertical-align:central;
}

.textoMensaje {
  margin-left: 15px; }

/*botones*/
.boton {
  width: 153px;
  background-color: var(--background-color);
  height: 20px;
  font-size: x-small;
  font: var(--font-family);
  color: white; 
  box-shadow: 5px 5px 3px #888888;}







.forma1 {

    position:relative;
    width: 100px;
    height: 220px;
    background-color:#C00000;
    border-radius:15px;
    
}





  .boton.admini {
    background-color: #a500ff; }

.boton:hover {
  background-color: gray; }

/*DropDown*/
.drop {
  height: 20px;
  background-color: #D7EBFF;
  border-color: #231F20;
  border-radius: 3px;
  color: #000000;
  font-size: x-small;
  font-weight: bold;
  cursor: pointer; }
  .drop.peq {
    width: 100px; }
  .drop.med {
    width: 170px; }
  .drop.big {
    width: 200px; }

.listaContenido {
  Font-Bold: True;
  //Font-Names: Microsoft Sans Serif;
  Font-Size: X-Small;
  Font-Underline: True;
  Height: 200px;
  Width: 300px; }
  .listaContenido.peq {
    height: 150px; }

/*TextBox*/
.txtBox {
  //Font-Names: Microsoft Sans Serif;
  Font-Size: X-Small;
  ForeColor: #303030;
  height: 15px;
  text-transform: uppercase; }
  .txtBox.peq {
    width: 100px; }
  .txtBox.med {
    width: 170px; }
  .txtBox.big {
    width: 200px; }

.cabezote {
  width: 100%;
  float: left; }

.logoCabezote {
  float: left; }

.flecha {
  width: 13px;
  height: 9px;
  float: right; }

#pagina {
  margin: auto;
  width: 1400px; }

#columnaIzquierda {
  float: left;
  width: 300px; }

#columnaDerecha {
    float: left;
    width: 230px;
    padding-left: 25px;
    text-align: center;
}

#columnaCentral {
  float: left;
  width: 700px; }

#cuerpo {
  width: 100%;
  margin-top: 110px; }

/*Columna derecha*/
#derecha {
  margin-left: auto;
  margin-right: auto; }
  #derecha table {
    padding-left: auto;
    padding-right: auto; }
  #derecha td {
    float: center; }

/*Barner superior*/
#menuSuperior {
  width: 100%;
  height: 30px; }
  #menuSuperior ul {
    background-color: var(--background-color);
    width: 100%;
    border-top-left-radius: 15px;
    color: #FFFFFF;
    list-style-type: none; }
  #menuSuperior ul li {
    display: inline; }

.btnSuperior {
  //font-family: 'Microsoft Sans Serif';
  width: 110px;
  color: white;
  font-weight: bold;
  font-size: x-small;
  text-align: center;
  height: 30px;
  background-color: transparent;
  border-style: none; }
  .btnSuperior:hover {
    background-color: gray;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }

.admin {
  border-left: 2px dotted #231F20;
  border-right: 2px dotted #231F20;
  border-bottom: 2px dotted #231F20;
  border-top: 2px dotted #231F20; }
  .admin td {
    color: #a500ff; }

/* Fecha */
.lbFecha {
  width: 28%;
  float: right;
  padding-top: 8px; 
  font-size: 10px;
  font-weight: bold;
  text-align: center;
}

/* Slide imagenes */
#slideImagenes {
  width: 700px; }

/* Id funcionario */
#idFuncionario {
  background-color: var(--background-color);
  height: 20px;
  padding-left: 15px; }
  #idFuncionario label {
    color: white; }

/* Pie de pagina*/
#piePagina {
  width: 1300px;
  margin-top: 20px;
  margin-right: auto;
  margin-left: auto;
  float: left; }
#piePagina #textoPie {
    color: #040404;
    text-align: right;
    height: 13px;
    margin-top: 5px;
    margin-right: 300px;
    margin-bottom: 0px;
    margin-left: auto;
    width: 20%;
    border-top-width: 1px;
    border-top-style: solid;
    float: right;
    border-top-color: #dd9f17;
}
/* Contenido de las CONTENT */
#contenedorGrande {
  float: left;
  padding-top: 10px;
  width: 700px; }

#tituloContenido {
  background-color: var(--background-color);
  width: 100%;
  line-height: 20px;
  text-transform: uppercase;
  color: white;
  font-weight: bold; }
  #tituloContenido label {
    padding-left: 15px; }

#puntosContenido {
  border-left: 1px solid #231F20;
  border-right: 1px solid #231F20;
  border-bottom: 1px solid #231F20;
  padding: 5px;
  float: left;
  width: 686px;
  text-align: left; }

#parrafoUno {
  float: left;
  width: 415px;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
  border: 1px solid #231F20;
  height: 47px;
  text-align: justify;
  margin-left: 15px; }

#periodo {
  margin-right: 15px; }
  #periodo #tituloPeriodo {
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    text-align: center;
    line-height: 20px;
    background-color: var(--background-color);
    float: right;
    width: 195px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px; }
  #periodo #cuerpoPeriodo {
    border-left: 2px dotted #231F20;
    border-right: 2px dotted #231F20;
    border-bottom: 2px dotted #231F20;
    float: right;
    width: 191px; }
  #periodo table {
    padding-left: 10px; }

.textoInfo {
  margin-left: 25px; }

#titulosInferiores {
  float: left;
  margin-top: 10px;
  margin-left: 15px; }
  #titulosInferiores span {
    /*border: thin solid #f1f1f1;*/
    left: 576px;
    top: 472px;
    color: maroon;
    font-family: verdana;
    font-size: xx-small;
    font-weight: bold;
    display: inline-block;
    z-index: 107; }




  /*#barnerContent table {
    width: 100%; }*/
  #barnerContent label {
    text-align: center;
    /*//font-family: Verdana;*/
    font-size: x-small;
    color: black; }



/* animacion slider */
.sliderImagenes {
  position: relative;
  max-width: 700px;
  height: 250px; }

.sliderImagenes figure {
  margin: 0;
  max-width: 700px;
  height: 250px;
  background: #000;
  position: absolute; }

.sliderImagenes img {
  box-shadow: 0 0 2px #666;
  width: 700px;
  height: 250px; }

.sliderImagenes figcaption {
  position: absolute;
  top: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  font-size: .8em;
  padding: 8px 12px;
  opacity: 0;
  transition: opacity .5s; }

.sliderImagenes:hover figure figcaption {
  transition: opacity .5s;
  opacity: 1; }

.sliderImagenes-attr {
  max-width: 495px;
  text-align: right;
  font-size: .7em;
  font-style: italic;
  margin: 0 auto; }

.sliderImagenes-attr a {
  color: #666; }

.sliderImagenes figure {
  opacity: 0; }

/*figure:nth-child(1) {
  animation: xfade 124s 0s infinite; }*/
/*figure:nth-child(2) {
  animation: xfade 124s 4s infinite; }
figure:nth-child(3) {
  animation: xfade 124s 8s infinite; }
figure:nth-child(4) {
  animation: xfade 124s 12s infinite; }
figure:nth-child(5) {
  animation: xfade 124s 16s infinite; }
figure:nth-child(6) {
  animation: xfade 124s 20s infinite; }
figure:nth-child(7) {
  animation: xfade 124s 24s infinite; }
figure:nth-child(8) {
  animation: xfade 124s 28s infinite; }
figure:nth-child(9) {
  animation: xfade 124s 32s infinite; }
figure:nth-child(10) {
  animation: xfade 124s 36s infinite; }
figure:nth-child(11) {
  animation: xfade 124s 40s infinite; }
figure:nth-child(12) {
  animation: xfade 124s 44s infinite; }
figure:nth-child(13) {
  animation: xfade 124s 48s infinite; }
figure:nth-child(14) {
  animation: xfade 124s 52s infinite; }
figure:nth-child(15) {
  animation: xfade 124s 56s infinite; }
figure:nth-child(16) {
  animation: xfade 124s 60s infinite; }
figure:nth-child(17) {
  animation: xfade 124s 64s infinite; }
figure:nth-child(18) {
  animation: xfade 124s 68s infinite; }
figure:nth-child(19) {
  animation: xfade 124s 72s infinite; }
figure:nth-child(20) {
  animation: xfade 124s 76s infinite; }
figure:nth-child(21) {
  animation: xfade 124s 80s infinite; }
figure:nth-child(22) {
  animation: xfade 124s 84s infinite; }
figure:nth-child(23) {
  animation: xfade 124s 88s infinite; }
figure:nth-child(24) {
  animation: xfade 124s 92s infinite; }
figure:nth-child(25) {
  animation: xfade 124s 96s infinite; }
figure:nth-child(26) {
  animation: xfade 124s 100s infinite; }
figure:nth-child(27) {
  animation: xfade 124s 104s infinite; }
figure:nth-child(28) {
  animation: xfade 124s 108s infinite; }
figure:nth-child(29) {
  animation: xfade 124s 112s infinite; }
figure:nth-child(30) {
  animation: xfade 124s 116s infinite; }
figure:nth-child(31) {
  animation: xfade 124s 120s infinite; }*/

@keyframes xfade{
  0%{
    opacity: 1;
  }
  14.67% {
    opacity:1;
  }
  16.67%{
    opacity: 0;
  }
  98% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}