@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");

@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
  }
  @-webkit-keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
  }
  @-ms-keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
  }
  @-moz-keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
  }
  #animate-area { 
    width: 95%; 
    height: 100px; 
    background-image: url(images/ban.jpg);
    background-position: 0px 0px;
    background-repeat: repeat-x;
    animation: animatedBackground 40s linear infinite;
    -ms-animation: animatedBackground 40s linear infinite;
    -moz-animation: animatedBackground 40s linear infinite;
    -webkit-animation: animatedBackground 40s linear infinite;
  }

#animate-area1 { 
    width: 100%; 
    height: 80px; 
    background-image: url(images/ban.jpg);
    background-position: 0px 0px;
    background-repeat: repeat-x;
    animation: animatedBackground 40s linear infinite;
    -ms-animation: animatedBackground 40s linear infinite;
    -moz-animation: animatedBackground 40s linear infinite;
    -webkit-animation: animatedBackground 40s linear infinite;
  }

#animate-area2 { 
    width: 95%; 
    height: 80px; 
    background-image: url(images/ban.jpg);
    background-position: 0px 0px;
    background-repeat: repeat-x;
    animation: animatedBackground 40s linear infinite;
    -ms-animation: animatedBackground 40s linear infinite;
    -moz-animation: animatedBackground 40s linear infinite;
    -webkit-animation: animatedBackground 40s linear infinite;
  }
.TAB {
  height: 70%;
  width: 100%;
 border-color: brown;
 list-style: all;
 border-style:unset  ;

background-image: url(images/serinsa3.jpg);
}

.TAB1 {
  border-color: brown;
 list-style: all;
 border-style:ridge ;
 columns: 1em;
 width: 40%;
 height: 10%;
 align-content: center;
 text-align: center;
 
 margin: 0px 400px;
}

.FECR {
  height: 70%;
  width: 100%;
 border-color: brown;
 list-style: all;
 border-style:unset  ;

background-image: url(images/serinsa3.jpg);
 
}


.cel {
  height: 60px;
  width: 25%;
 border-color: brown;
 list-style: none;
 border-style: dashed;
  border: 5px groove #d4d6d4;
 font-style: italic;
 text-decoration-color: red;
font-size: calc(6px + 1.5vh);
  line-height: calc(6px + 3vh);
  text-shadow: 0 0 5px #bdf2bb, 0 0 15px #bdf2bb, 0 0 20px #bdf2bb, 0 0 40px #bdf2bb, 0 0 60px #010308, 0 0 10px #010308, 0 0 98px #010308;
    color #010308;
  font-family: "Oswald", cursive;
  text-align: center;
  /*animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;  */
  color:#0e205c;
  
}

.cel1 {
  height: 10px;
  width: 15%;
 border-color: brown;
 list-style: none;
 border-style: dashed;
  border: 5px groove #d4d6d4;
 font-style: italic;
 text-decoration-color: red;
font-size: calc(6px + 1.5vh);
  line-height: calc(6px + 3vh);
  text-shadow: 0 0 5px #bdf2bb, 0 0 15px #bdf2bb, 0 0 20px #bdf2bb, 0 0 40px #bdf2bb, 0 0 60px #010308, 0 0 10px #010308, 0 0 98px #010308;
    color #010308;
  font-family: "Oswald", cursive;
  text-align: center;
  /*animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;  */
  color:#0e205c;
  
}

.cel2 {
  height: 20px;
  width: 11.1%;
 border-color: brown;
 list-style: none;
 border-style: dashed;
  border: 5px groove #3d753d;
 font-style: italic;
 text-decoration-color: red;
font-size: calc(6px + 1.5vh);
  line-height: calc(6px + 3vh);
  text-shadow: 0 0 5px #bdf2bb, 0 0 15px #bdf2bb, 0 0 20px #bdf2bb, 0 0 40px #bdf2bb, 0 0 60px #010308, 0 0 10px #010308, 0 0 98px #010308;
    color #010308;
  font-family: "Oswald", cursive;
  text-align: center;
  /*animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;  */
  color:#0e205c;
  
}


body {
text-align: center;
}
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-border-radius: 20px / 10px;
-webkit-border-radius: 20px / 10px;
border-radius: 20px / 10px;


}
#titulo {
font: bold 36px verdana, sans-serif;
}

@-webkit-keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
/*     color: #fccaff;
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
  text-shadow: 0 0 5px #dfdff7, 0 0 15px #dfdff7, 0 0 20px #dfdff7, 0 0 40px #dfdff7, 0 0 60px #c7dff2, 0 0 10px #5f64fa, 0 0 98px #5f64fa;
    color: #0a1533;
  }
}

@keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
/*     color: #fccaff;
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
  text-shadow: 0 0 5px #dfdff7, 0 0 15px #dfdff7, 0 0 20px #dfdff7, 0 0 40px #dfdff7, 0 0 60px #c7dff2, 0 0 10px #5f64fa, 0 0 98px #5f64fa;
    color:#1370c2;
  }
}
.ti {font-size: calc(40px + 2vh);
  line-height: calc(40px + 4vh);
  text-shadow: 0 0 5px #dfdff7, 0 0 15px #dfdff7, 0 0 20px #dfdff7, 0 0 40px #7fa8f0, 0 0 60px #c7dff2, 0 0 10px #5fc6fa, 0 0 98px #5f64fa;
    color #1370c2;
  font-family: "Oswald", cursive;
  text-align: center;
  animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;   }

.tit {
  font-size: calc(10px + 2vh);
  line-height: calc(10px + 4vh);
/*   text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
    0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
  color: #fccaff; */
  text-shadow: 0 0 5px #dfdff7, 0 0 15px #dfdff7, 0 0 20px #dfdff7, 0 0 40px #7fa8f0, 0 0 60px#c7dff2, 0 0 10px #5f64fa, 0 0 98px #5f64fa;
    color #0a1533;
  font-family: "Oswald", cursive;
  text-align: center;
  animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;
  
}

.titu {
  font-size: calc(2px + 2vh);
  line-height: calc(2px + 4vh);
/*   text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
    0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
  color: #fccaff; */
  text-shadow: 0 0 5px #dfdff7, 0 0 15px #dfdff7, 0 0 20px #dfdff7, 0 0 40px #7fa8f0, 0 0 60px#c7dff2, 0 0 10px #5f64fa, 0 0 98px #5f64fa;
    color #0a1533;
  font-family: "Oswald", cursive;
  text-align: center;
  animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;
}

.sub {
  font-size: calc(2px + 2vh);
  line-height: calc(2px + 4vh);
/*   text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
    0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
  color: #fccaff; */
  text-shadow: 0 0 5px #f07de8, 0 0 15px #f07de8, 0 0 20px #f07de8, 0 0 40px #7a3b76, 0 0 60px#f07de8, 0 0 10px #7a3b76, 0 0 98px #7a3b76;
    color #f07de8;
  font-family: "Oswald", cursive;
  text-align: center;
  animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;
}
 
.subi {
  font-size: calc(4px + 4vh);
  line-height: calc(4px + 8vh);
/*   text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
    0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
  color: #fccaff; */
  text-shadow: 0 0 5px #f07de8, 0 0 15px #f07de8, 0 0 20px #f07de8, 0 0 40px #7a3b76, 0 0 60px#f07de8, 0 0 10px #7a3b76, 0 0 98px #7a3b76;
    color #f07de8;
  font-family: "Oswald", cursive;
  text-align: center;
  animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;
  
          border-radius: 10PX;
           
           width: 95%;
           margin: 10px auto;
           padding: 15px;
           background: white;


           
}



.grid {
  -webkit-box-flex: 0;
          flex: 0 0 auto;
  -webkit-perspective: 1500px;
          perspective: 1500px;
  display: grid;
  grid-template-columns: repeat(7,150px);
  grid-template-rows: repeat(3, 150px);
  grid-gap: 30px;
  max-width: 480px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
          text-align: center;
          margin-right: auto;
          justify-content: right;
    margin-left: 250px;
}
.grid div {
  background: rgba(7, 7, 51, 0.8);
   border: transparent;
    border-color: rgba(255, 255, 255, 255);
    border-style: ridge;
  padding: 20px;
  color: rgba(255, 255, 255, 0.8);
  box-shadow: 30px 30px 30px -20px rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  
  
}/*
.grid div:nth-child(odd) {
    
  -webkit-animation: 1000ms ease-in-out infinite alternate pulse;
          animation: 1000ms ease-in-out infinite alternate pulse;
}
.grid div:nth-child(even) {
  
  -webkit-animation: 1000ms 1000ms ease-in-out infinite alternate pulse;
          animation: 1000ms 1000ms ease-in-out infinite alternate pulse;
}

@-webkit-keyframes pulse {
  to {
    -webkit-transform: translate3d(0px, 0px, -60px);
            transform: translate3d(0px, 0px, -60px);
    box-shadow: 15px 15px 20px -20px rgba(0, 0, 0, 0.8);
  }
}

@keyframes pulse {
  to {
    -webkit-transform: translate3d(0px, 0px, -60px);
            transform: translate3d(0px, 0px, -60px);
    box-shadow: 15px 15px 20px -20px rgba(0, 0, 0, 0.8);
  }
}*/

.menu {
background:#070733;
padding: 1px 1px;

}
.menu li {
  
display: inline-block;
list-style: none;
padding: 1px;
font: bold 20px Oswald, sans-serif;
color: #fcfcfa
 border-radius: 100px;
  
}

.menu1 {
background:#0f8a2b;
padding: 1px 1px;

}


  
.en {
  /* width: 100%; default */
  display: block;
  border-radius: 100px;

  /* no relevante */
  color: white;
  background:#0f8a2b;
  text-decoration: none;
  text-align: center;
  width: 200px
 
}

.fe  {
    border-radius:10%;
-webkit-border-radius:5%;
box-shadow: 0px 0px 10px 10px #136115;
-webkit-box-shadow: 0px 0px 10px 10px #030530;
transform: rotate(0deg);
-webkit-transform: rotate(0 deg);}

  }

.ribbon {
    padding: 0 25px;
    height: 80px;
     
    background: #c94700;
    color: #301607;
     
    position: relative;
    float: left;
    clear: left;
     
    font-family: 'Oswald', cursive;
    font-size: 32px;            
    line-height: 80px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    }

  .banner{
  width: 100%;
  height: 600px;
  animation: banner 10s infinite linear alternate;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes banner{
  0%, 20%{
    background-image: url("images/25años.png");
  }
  25%, 45%{
    background-image: url("images/ENERO.jpg");
  }
  50%, 70%{
    background-image: url("images/JUNIO.jpg");
  }
  75%, 100%{
    background-image: url("images/DICIEMBRE.jpg");
  }
}
.capa{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  
}
.info{
  z-index: 1;
  width: 100%;
  max-width: 550px;
  text-align: center;
}
.info h1{
  color: #fff;
  font-size: 45px;
  margin-bottom: 20px;
  letter-spacing: 1px;
}
.info p{
  color: #c7c7c7;
  line-height: 1.7;
  margin-bottom: 30px;
}
.info a{
  color: #fff;
  text-decoration: none;
  background: #3088e0;
  padding: 16px 37px;
  display: inline-block;
  border-radius: 50px;
}
.prueba {

  column-count: 3;
  style
}
.fo {
  background: #ffffff;
  width: 100%;
  text-align: center;
  align-items: center;
  align-content: center;
}
img.izq{
float: left;
}

.tex {
 text-align: justify;
 
 height: 200px;
  
    color: #131313;
    font-size: 16px;
    text-align: justify-all;
    text-transform: uppercase;
    text-shadow: #2d2f2d 2px 2px 4px; 
}

.tex1 {
 text-align: justify;
 color: #131313;
 height: 200px;
 text-shadow: #2d2f2d 2px 2px 4px;

}


.tex2 {
 text-align: justify;
 
 height: 200px;
  
    color: #131313;
    font-size: 12px;
    text-align: justify-all;
    text-transform: uppercase;
    text-shadow: #2d2f2d 2px 2px 4px; 
}

.dos {
       column-count:2;
            
          border-radius: 10PX;
           border-style: ridge;
           width: 95%;
           margin: 10px auto;
           padding: 15px;
           height: 400px;

}

.dos1 {
       column-count:3;
            
          border-radius: 10PX;
           border-style: ridge;
           width: 95%;
           margin: 10px auto;
           padding: 15px;
           height: 400px;

}

.dosi {
       column-count:5;
            
          border-radius: 10PX;
           border-style: ridge;
           width: 95%;
           margin: 10px auto;
           padding: 15px;
           height: 220px;

}

.dosis {
          column-count:2;
           text-align: justify;
           width: 95%;
           padding: 15px;
           height: 100%;

}
a.enl {
   display: inline-block;
  border-radius: 0px;
  border: green 1px solid;

  /* no relevante */
  color: white;
  background:#0f8a2b;
  text-decoration: none;
  text-align: center;
  width: 250px

}

.cuad {
  


}

</style>
 

<style >
    aside,article, footer, section, nav, header{
      display: block;
      margin: 0;
      padding: 0;

    }
    p, h1,h2,h3 {
      margin: 0;
      padding: 0;
      
      
    }
    html,  body  {
      margin: 0;
      padding: 0;
    }
    html{
      
    }
    body {
      
      margin:0 auto;
      width: 100%;
      font-family: verdana,Geneva, sans-serif;
    }
    header {
      height: 130px;
      background: #f7f7fc;
      align-content: right
    }

    article{
      height: 550px;
      
      width: 60%;
      float: right;
      margin:10px;
    }
    aside {

      height: 550px;
      
      width: 39%;
      float: left;

    }

    footer{
      height: 60px
      background:#070733;
      clear: both;
    }
  

  img {
   margin: auto;
   display: block;

   
  }
  main {
            column-count:3;
           
           width: 95%;
           margin: 10px auto;
           padding: 15px;

        }

 article {

  border-color: green;
 }


  
table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  
}

thead th:nth-child(1) {
  width: 25%;
}

thead th:nth-child(2) {
  width: 25%;
}

thead th:nth-child(3) {
  width: 25%;
}

thead th:nth-child(4) {
  width: 25%;
}

th, td {
  padding: 1px;
}
</style>
.den {
  width: 100px;
  text-align: center;
  align-content: center;
  color: white;
  
}