/* hoja de vida usando cajas*/
/* usando FLEX */

/* header*/
body {
  background-color: red;
  background-color: teal;
/*background-color: yellow;*/
}
header {
  /*background-color: rgb(205, 222, 255);
  background-color: rgb(205, 222, 255);*/
  background-color: rgb(203, 203, 203);

  text-align: center;
  /*text-align: left;*/
  padding: 0;
  margin: 0;
  width: 100%;
  float: left;
}
header p {  /* logo*/
  text-align: center;
  background-color: rgb(203, 203, 203);
}

.logo {
  width: 10%;

  border: 2px solid red;
  background-color: rgb(203, 203, 203);

  max-width: 100%;
  text-align: left;
  animation: logoa 30s infinite;
  position: relative;
}
@keyframes logoa {
  0%{left: 0%}
  50%{left: 35%}
  100%{left: 0%}
}
.logoab {
  width: 10%;

  border: 2px solid brown;
  background-color: rgb(203, 203, 203);
  max-width: 100%;
  text-align: left;
  animation: logob 30s infinite;

  position: relative;
}
@keyframes logob {
  0%{right: 0%}
  50%{right: 35%}
  100%{right: 0%}
}
.logoc {
  background-color: rgb(145, 196, 110);
  background-color: rgb(205, 222, 255);
  width: 8%;

}


.tema{
  background-color: yellow;
  background: linear-gradient(rgb(203, 203, 203), rgb(232, 222, 232), rgb(203, 203, 203));
  background: linear-gradient(rgb(202, 203, 203), rgb(222, 222, 182), gray);
}
.enchead{
  text-shadow: 1px 2px 3px red;
  font-size: 60px; /*60px*/

  /*background-color: rgb(205, 222, 255);
  background-color: rgb(203, 203, 203);*/
}

.enchead2{
  text-align: left;
  text-shadow: 1px 2px 3px red;
  font-size: 35px; /*30px*/
  /*background-color: rgb(205, 222, 255);*/
  /*background-color: rgb(203, 203, 203);*/
}
.enchead3{
  text-align: left;
  text-shadow: 1px 2px 3px red;
  font-size: 20px; /*20px*/
  text-decoration: none;
  padding-left: 0;
  margin-left: 0;
  /*background-color: rgb(205, 222, 255);*/
  background-color: rgb(203, 203, 203);
}

.t2 {font-size: 30px;font-weight: bold;}
.t3 {font-size: 20px;}

#ena-hv {
  background-color: rgb(68, 114, 196);
    background-color: rgb(197, 224, 179);

}

#eni-hv {
  background-color: rgb(68, 114, 196);
  background-color: rgb(205, 222, 255);
  background-color: rgb(203, 203, 203);

}

  #eni-hv img {
    /*width: 600px;
    /*transition-property: width, height;*/
    transition-property: width, height;
    transition-duration: 4s,8s;
  }
  #eni-hv img:hover {
  /*  width: 75%;*/
    /*width: 100vh;*/
    /*width: auto;*/
    width: inherit;
    height: 97vh;
    /*width: 75%;*/
    /*width: 30%;*/
    /*height: 70%;*/
  }

  #eni-hv video {
    transition-property: width, height;
    transition-duration: 4s,8s;
  }
  #eni-hv video:hover {
    width: inherit;
    height: 97vh;
  }
  .clib video{
    width: 100%;
    float: left;
  }
  .secenclibro{
    width: 90%;
    display: fix;
    flex-flow: row wrap;
    float: center;

  }

  .cizlibro video{
      width: 40%;
  }
.cizlibrono {
    width:100%;
    /*float: left;
  /*width: 35%;  /*21*/
    /*height: 35%;  /*150*/
    float: center;
    padding: 0;
    margin-top: 10px;
    background-color: red;
    background-color: yellow;
    background: linear-gradient(rgb(202, 203, 203), rgb(222, 222, 182), gray);

}
.cizuno {
  width: 40%;
  float: left;
}
.ciz {
  width: 33%;  /*32% 28% 21*/
  /*height: 35%;  /*150*/
  float: left;
  padding: 0;
  margin-top: 10px;
  background-color: red;
  background-color: yellow;
  background: linear-gradient(rgb(202, 203, 203), rgb(222, 222, 182), gray);
}
/*.ciz img, audio {*/
.ciz video{
    width: 90%;
}
.tema{
  width: 37%;
  float: left;
}
.cedtres {
  width: 35%;
  float: left;
}

.ced {
  width: 33%; /*28% 32% */
  /*height: 10%; /* 10% 200px*/
  float: right;
  padding: 0;
  margin-top: 10px;
  background-color: red;
  background-color: green;
  background: linear-gradient(rgb(202, 203, 203), rgb(222, 222, 182), gray);
}

.ced video {
  width: 90%;
}

.cvid{
  width: 90%; /*28% 32% */
  /*height: 10%; /* 10% 200px*/
  float: right;
  padding: 0;
  margin-top: 10px;
  background-color: red;
  background-color: green;
  background: linear-gradient(rgb(202, 203, 203), rgb(222, 222, 182), gray);
}
.cvid video {
  width: 90%;
}
#todo {
  background-color: rgb(205, 222, 255);
  background-color: rgb(203, 203, 203);
}
 section {
   display: flex;
   flex-flow: row wrap;
   float: left;
   /*float: left;
   /*background-color: rgb(133, 195, 226);*/
 }

.enchead3 {
  /*list-style: none;*/

  /*color: yellow !important;*/
}
ul {
  list-style: none;
  /*text-decoration: none;*/
  /*color: yellow !important;*/
}
.secenc{
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  /*float: left;*/
  float: right;

}
section article  {
  width: 54%;
  /*max-height: 270px;*/
  max-height: 410px;
  overflow: auto;
  padding: 1%; /*5px*/
  float: right;
  border-radius: 20px;
  -moz-border-radius: 5px;  /* Mozilla cirus for*/
  -webkit-border-radius: 5px; /*Safari */

  background-color: rgb(150, 185, 203);
  /*background: radial-gradient(#FFF,#3399CC,#FFF);*/
  background: radial-gradient(rgb(133, 195, 226) 1%, orange 10%, rgb(150, 185, 203));
/*  background: radial-gradient(rgb(150, 185, 203));*/
/*  background: radial-gradient(to right,rgb(150, 185, 203),rgb(133, 195, 226));*/

  /*
  background: radial-gradient(#FFF,#3399CC,#FFF);
und-color: yellow;*/
  flex-grow: 10px;
  float: right;
}

.uno {
  width: 20%;
  float: left;
  /*float: inherit;*/
  padding: 1%; /*5px*/
  background-color: rgb(81, 233, 229);
  background-color: rgb(203, 203, 203);
  background: linear-gradient(rgb(202, 203, 203), rgb(222, 222, 182), gray);
  border-radius: 15px;
  -moz-border-radius: 5px;  /* Mozilla cirus for*/
  -webkit-border-radius: 5px; /*Safari */


/*  margin: 5px;
  padding: 5px;*/
}
/*.uno img {*/
.imag{
  width: 32%;
}

.tres {
  width: 20%;
  /*float: right;*/
  float: left;
  border-radius: 20px;
  -moz-border-radius: 5px;  /* Mozilla cirus for*/
  -webkit-border-radius: 5px; /*Safari */

  padding: 1%; /*5px*/
  background-color: rgb(133, 195, 226);
  background-color: rgb(203, 203, 203);
  background-color: yellow;
  font-size: 20px;
  background: linear-gradient(aliceblue, green, gray);
  background:rgb(203, 203, 203);
  background: linear-gradient(rgb(203, 203, 203), rgb(197, 222, 182), gray);
/*background: linear-gradient(#fff,#6788DE,#CDEDFF);*/
}
table {
  border-collapse: collapse;
  color: black;
}
thead tr th {
  background-color: rgb(0, 153, 153);
  background-color: green;
}

tr:nth-child(odd) {
  background-color: #D1D1D1;
  background-color: rgb(165, 230, 241);
}

tr:nth-child(even) {
  background-color: #D1D1D1;
  background-color: rgb(164, 177, 242);
}

/*tr:last-child */
/*.tot {*/
/*tfoot tr th*/
.tot {
  background-color: rgb(236, 32, 76);
  background-color: red;
}
footer {
  background-color: rgb(186, 250, 252);
  height: 40px;
  width: 20.7%;
  float: left;
}

@media (max-width:450px) { /*450px*/
  .enchead3 { font-size: 20px;} /*15px*/
  .uno, .dos, .tres,
  .tema, .cizuno, .cedtres
  { width: 100%; }
  .imh img:hover{}
  .enchead{ font-size: 20px;} /*60px*/
  .t2 {font-size: 15px;}
  /*.t3 {font-size: 8px;display: none;}*/
  .t3 {font-size: 10px;}
  .uno {order: 3;}
  .dos {order: 1;}
  .tres {order: 2;}
  .tema {order: 1;}
  .cizuno {order: 2;}
  .cedtres {order: 3;}
}

@media (min-width:451px) and (max-width:800px) { /*451px  */
  .enchead{ font-size: 30px;}
  .t2 {font-size: 20px;}
  .t3 {font-size: 13px;}
  .uno {order: 1;}
  .dos {order: 2;}
  .tres {order: 3;}
}

@media (min-width:801px)  {
  .t2 {font-size: 30px;}
  .t3 {font-size: 20px;}
  .uno {order: 1;}
  .dos {order: 2;}
  .tres {order: 3;}
  .imh img:hover{
    width: 15%;
    position: relative;
    position: absolute;
    /*transform: rotate(10deg);
    -webkit-filter: drop-shadow(2px 3px 2px #82c3a6);
    filter: drop-shadow(2px 2px 2px #82c3a6);
    border: 2px solid #82c3a6;*/
  }

}