header {
  background-color: #516ab1;
  display: flex;
  height: 200px;
  width: 100%;
}
.imagenes {
  float: left;
}
li {
  overflow: left;
}
.slider {
  width: 100%;
  margin: auto;
  overflow: hidden;
}
.slider ul {
  display: flex;
  padding: 0;
  width: 400%;
  animation: cambio 20s infinite;
  animation-direction: alternate;
}
.slider li {
  width: 100%;
  list-style: none;
}
.slider img {
  width: 100%;
}
@keyframes cambio {
  0% {
    margin-left: 0;
  }
  20% {
    margin-left: 0;
  }

  25% {
    margin-left: -100%;
  }
  45% {
    margin-left: -100%;
  }

  50% {
    margin-left: -200%;
  }
  70% {
    margin-left: -200%;
  }

  75% {
    margin-left: -300%;
  }
  100% {
    margin-left: -300%;
  }
}
.nav {
  width: 100%;
}
.nav > ul {
  justify-content: center;
  background-color: #3f59a4;
  margin: 0px;
  padding-top: 7px;
  text-align: center;
  list-style: none;
  display: flex;
  height: 35px;
}
nav ul li a {
  color: white;
  font-family: Helvetica;
  text-decoration: none;
  font-size: 20px;
  padding: 20px;
  width: 100%;
}
.nav ul li a:hover {
  background-color: #516ab1;
}
body {
  background-color: rgb(255, 255, 255);
}
.sistema {
  font-family: "Montserrat";
  font-size: 17px;
  text-align: right;
  font-weight: 400;
  color: #fff;
  text-align: right;
  float: right;
  margin-left: 400px;
  padding-top: 100px;
  padding-bottom: 0px;
}
h1 {
  font-family: "Montserrat";
  color: #38579e;
  font-size: 34px;
  padding-left: 10px;
}
.titulo {
  font-family: "Montserrat";
  text-align: center;
  font-size: 30px;
  padding-left: 0px;
  color: #38579e;
  /*color: #516ab1;*/
}
.imagetitulo img {
  display: block;
  /*border: solid 1px black;*/
  margin-left: auto;
  margin-right: auto;
  width: 35%;
}
.imagetitulo2 img {
  display: block;
  /*border: solid 1px black;*/
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
  width: 50%;
}
p {
  font-family: "Montserrat";
  color: #484d79;
  text-align: justify;
  font-size: 17px;
  width: 55%;
  margin-left: auto;
  margin-right: auto;
  line-height: 25px;
  /*padding-left: 70px;*/
}
th {
  background-color: #6cbcfc;
  font-family: "Montserrat";
  color: #484d79;
  text-align: center;
  font-size: 12px;
  /*padding-left: 35px;*/
  border-radius: 5px;
}
.elm1 h1 {
  background-color: #6cbcfc;
  font-family: "Montserrat";
  color: #484d79;
  text-align: center;
  font-size: 27px;
  width: 54%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  border-radius: 5px;
}
td {
  font-family: "Montserrat";
  color: #484d79;
  font-size: 15px;
  /*color:  white;*/
  padding-left: 15px;
  border-radius: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  height: 30%;
}
td input {
  text-align: center;
  border-radius: 5px;
}
table {
  margin: auto;
  width: 55%;
  /*background-color: #3f59a4;*/
}
tr:nth-child(even) {
  /*background-color: #6cbcfc;*/
  background-color: #91cdff;
}
.resultado {
  background-color: #fcac74;
  width: 55%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.3em;
  padding-left: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 8px;
}
.resultado p {
  font-size: 16px;
  width: 96%;
  margin: 2px 15px 2px 15px;
}
.pesoinevertido {
  /*background-color: #F0E343;*/
  width: 85%;
  margin-left: auto;
  margin-right: auto;
}
.resultadoimagen img {
  display: block;
  /*border: solid 1px black;*/
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
  width: 85%;
}
.imagepeso img {
  display: block;
  /*border: solid 1px black;*/
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
  width: 85%;
}

.resultadoleyenda {
  background-color: #fcac74;
  width: 55%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 8px;
}
.resultadoleyenda p {
  width: 85%;
}
.resultadoleyenda2 {
  /*background-color: #6cbcfc;*/
  background-color: #91cdff;
  width: 55%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  padding-left: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 8px;
}
.resultadoleyenda p {
  width: 96%;
  line-height: 25px;
  margin: 2px 15px 2px 15px;
}
.resultadoleyenda2 p {
  line-height: 25px;
  width: 96%;
  margin: 2px 15px 2px 15px;
}
.resultado input {
  background-color: white;
  font-size: 17px;
  font-weight: bold;
  border: none;
  color: #484d79;
  border-radius: 5px;
  width: 80px;
  border-radius: 8px;
  text-align: center;
}
.resultadoleyenda2 input {
  background-color: white;
  font-size: 17px;
  font-weight: bold;
  border: none;
  color: #484d79;
  border-radius: 5px;
  width: 80px;
  border-radius: 8px;
  text-align: center;
}
.pesoinevertido p {
  margin-top: 5em;
  text-align: center;
  border: solid 1px;
  border-radius: 8px;
  font-size: 23px;
  font-style: oblique;
}
#total {
  font-weight: bold;
  text-align: center;
}
/* torta*/
#backButton {
  border-radius: 4px;
  padding: 8px;
  border: none;
  font-size: 16px;
  background-color: #2eacd1;
  color: white;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.invisible {
  display: none;
}
.mapa img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3em;
  margin-bottom: 3em;
}
.tablabibliotecas th {
  background-color: #fcac74;
}
.tablabibliotecas tr:nth-child(even) {
  /*background-color: #fcac74;*/
}
.logos img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 55%;
  margin-top: 4em;
}
.titulovalor img {
  display: block;
  margin: 3em auto;
  width: 50%;
}
.beneficioscostos {
  /*background-color: #6cbcfc;*/
  background-color: #91cdff;
  width: 55%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  padding-left: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 8px;
  line-height: 35px;
}
.beneficioscostos p {
  width: 96%;
  font-weight: 600;
}
.beneficioscostos input {
  text-align: center;
  width: 4em;
  border-radius: 6px;
}
/*Colores última tabla*/
.tablabibliotecas table tbody .piloto {
  background-color: #3963b0;
}
.tablabibliotecas table tbody .piloto td {
  color: white;
}
.tablabibliotecas table tbody .pbprado {
  background-color: #3963b0;
}
.tablabibliotecas table tbody .pbprado td {
  color: white;
}
.tablabibliotecas table tbody .tren {
  background-color: #3963b0;
}
.tablabibliotecas table tbody .tren td {
  color: white;
}

.tablabibliotecas table tbody .sanjavier {
  background-color: #3963b0;
}
.tablabibliotecas table tbody .sanjavier td {
  color: white;
}

.tablabibliotecas table tbody .floresta {
  background-color: #c1d55c;
}
.tablabibliotecas table tbody .floresta td {
  color: white;
}
.tablabibliotecas table tbody .zuleta {
  background-color: #3963b0;
}
.tablabibliotecas table tbody .zuleta td {
  color: white;
}
.tablabibliotecas table tbody .popular {
  background-color: #c1d55c;
}
.tablabibliotecas table tbody .popular td {
  color: white;
}
.tablabibliotecas table tbody .fernando {
  background-color: #c1d55c;
}
.tablabibliotecas table tbody .fernando td {
  color: white;
}
.tablabibliotecas table tbody .elena {
  background-color: #c1d55c;
}
.tablabibliotecas table tbody .elena td {
  color: white;
}
.tablabibliotecas table tbody .palmitas {
  background-color: #c1d55c;
}
.tablabibliotecas table tbody .palmitas td {
  color: white;
}
.tablabibliotecas table tbody .occidental {
  background-color: #c1d55c;
}
.tablabibliotecas table tbody .occidental td {
  color: white;
}
.tablabibliotecas table tbody .santacruz {
  background-color: #c1d55c;
}
.tablabibliotecas table tbody .santacruz td {
  color: white;
}
.tablabibliotecas table tbody .granizal {
  background-color: #c1d55c;
}
.tablabibliotecas table tbody .granizal td {
  color: white;
}
.tablabibliotecas table tbody .limonar {
  background-color: #c1d55c;
}
.tablabibliotecas table tbody .limonar td {
  color: white;
}
.tablabibliotecas table tbody .altavista {
  background-color: #c1d55c;
}
.tablabibliotecas table tbody .altavista td {
  color: white;
}
.tablabibliotecas table tbody .avila {
  background-color: #c1d55c;
}
.tablabibliotecas table tbody .avila td {
  color: white;
}
.tablabibliotecas table tbody .poblado {
  background-color: #c1d55c;
}
.tablabibliotecas table tbody .poblado td {
  color: white;
}
.tablabibliotecas table tbody .pbsanjavier {
  background-color: #51b9bb;
}
.tablabibliotecas table tbody .pbsanjavier td {
  color: white;
}
.tablabibliotecas table tbody .domingo {
  background-color: #51b9bb;
}
.tablabibliotecas table tbody .domingo td {
  color: white;
}
.tablabibliotecas table tbody .carrasquilla {
  background-color: #51b9bb;
}
.tablabibliotecas table tbody .carrasquilla td {
  color: white;
}
.tablabibliotecas table tbody .greiff {
  background-color: #51b9bb;
}
.tablabibliotecas table tbody .greiff td {
  color: white;
}
.tablabibliotecas table tbody .belen {
  background-color: #51b9bb;
}
.tablabibliotecas table tbody .belen td {
  color: white;
}
.tablabibliotecas table tbody .botero {
  background-color: #51b9bb;
}
.tablabibliotecas table tbody .botero td {
  color: white;
}
.tablabibliotecas table tbody .betancur {
  background-color: #51b9bb;
}
.tablabibliotecas table tbody .betancur td {
  color: white;
}
.tablabibliotecas table tbody .vallejo {
  background-color: #51b9bb;
}
.tablabibliotecas table tbody .vallejo td {
  color: white;
}
.tablabibliotecas table tbody .garcia {
  background-color: #51b9bb;
}
.tablabibliotecas table tbody .garcia td {
  color: white;
}

/* ##Dispositivo = Tablets, Ipads (horizontal) 768px to 1024px */

@media (min-width: 768px) and (max-width: 1024px) {
  /*Aquí van los estilos*/
  p {
    font-family: "Montserrat";
    color: #484d79;
    text-align: justify;
    font-size: 17px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    /*padding-left: 70px;*/
  }
  table {
    margin: auto;
    width: 85%;
  }
  .tablabibliotecas table {
    margin: auto;
    width: 85%;
    font-size: 10px;
  }
  .elm1 h1 {
    /*background-color: #6cbcfc;*/
    background-color: #91cdff;
    font-family: "Montserrat";
    color: #484d79;
    text-align: center;
    font-size: 27px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    border-radius: 5px;
  }
  .resultadoleyenda {
    background-color: #fcac74;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 8px;
  }
  .resultadoleyenda2 {
    /*background-color: #6cbcfc;*/
    background-color: #91cdff;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 8px;
  }
  .resultado {
    background-color: #fcac74;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.3em;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 8px;
  }
  .imagepeso img {
    display: block;
    /*border: solid 1px black;*/
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    width: 55%;
  }
  .mapa img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3em;
    margin-bottom: 3em;
    width: 100%;
  }
  .logos img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4em;
    width: 100%;
  }
  .imagetitulo2 img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    width: 100%;
  }
  .titulovalor img {
    display: block;
    margin: 3em auto;
    width: 100%;
  }
  .beneficioscostos {
    width: 85%;
  }
}
/* ##Dispositivo = Tablets, Mobiles de 481px a 767px */
@media (min-width: 481px) and (max-width: 767px) {
  /*Aquí van los estilos*/
  h1 {
    font-family: "Montserrat";
    color: #38579e;
    font-size: 28px;
    padding-left: 10px;
  }
  .titulo {
    font-family: "Montserrat";
    color: #484d79;
    text-align: center;
    font-size: 35px;
    padding-left: 0px;
  }
  p {
    font-family: "Montserrat";
    color: #484d79;
    text-align: justify;
    font-size: 15px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
  td {
    font-family: "Montserrat";
    color: #484d79;
    font-size: 15px;
    /*color:  white;*/
    padding-left: 15px;
    border-radius: 5px;
  }
  td input {
    text-align: center;
    border-radius: 1px;
  }
  table {
    margin: auto;
    width: 85%;
  }
  .tablabibliotecas table {
    margin: auto;
    width: 85%;
    font-size: 10px;
  }
  .elm1 h1 {
    /*background-color: #6cbcfc;*/
    background-color: #91cdff;
    font-family: "Montserrat";
    text-align: center;
    font-size: 18px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    border-radius: 5px;
  }
  .resultadoleyenda {
    background-color: #fcac74;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 8px;
  }
  .resultadoleyenda2 {
    /*background-color: #6cbcfc;*/
    background-color: #91cdff;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 8px;
  }
  .resultado {
    background-color: #fcac74;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.3em;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 8px;
  }
  .imagepeso img {
    display: block;
    /*border: solid 1px black;*/
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    width: 85%;
  }
  td input {
    text-align: center;
    border-radius: 5px;
    width: 80%;
  }
  .mapa img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3em;
    margin-bottom: 3em;
    width: 80%;
  }
  .logos img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4em;
    width: 85%;
  }
  .imagetitulo2 img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    width: 100%;
  }
  .titulovalor img {
    display: block;
    margin: 3em auto;
    width: 75%;
  }
  .beneficioscostos {
    width: 85%;
  }
  .overall {
    font-size: 10px;
  }
}
/* ##Dispositivo = Smartphones de 320px a 479px */
@media (min-width: 320px) and (max-width: 480px) {
  /*Aquí van los estilos*/
  h1 {
    font-family: "Montserrat";
    color: #38579e;
    font-size: 16px;
    padding-left: 10px;
  }
  .titulo {
    font-family: "Montserrat";
    color: #484d79;
    text-align: center;
    font-size: 30px;
    padding-left: 0px;
  }
  p {
    font-family: "Montserrat";
    color: #484d79;
    text-align: justify;
    font-size: 13px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
  td {
    font-family: "Montserrat";
    color: #484d79;
    font-size: 13px;
    /*color:  white;*/
    padding-left: 15px;
    border-radius: 5px;
  }
  td input {
    text-align: center;
    border-radius: 1px;
  }
  table {
    margin: auto;
    width: 85%;
  }
  .tablabibliotecas table {
    margin: auto;
    width: 85%;
    font-size: 10px;
  }
  .elm1 h1 {
    /*background-color: #6cbcfc;*/
    background-color: #91cdff;
    font-family: "Montserrat";
    text-align: center;
    font-size: 13px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    border-radius: 5px;
  }
  .resultadoleyenda {
    background-color: #fcac74;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 8px;
  }
  .resultadoleyenda2 {
    /*background-color: #6cbcfc;*/
    background-color: #91cdff;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 8px;
  }
  .resultado {
    background-color: #fcac74;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.3em;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 8px;
  }
  .imagepeso img {
    display: block;
    /*border: solid 1px black;*/
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    width: 100%;
  }
  td input {
    text-align: center;
    border-radius: 5px;
    width: 80%;
  }
  .mapa img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3em;
    margin-bottom: 3em;
    width: 100%;
  }
  .logos img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4em;
    width: 85%;
  }
  .imagetitulo2 img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
    width: 100%;
  }
  .titulovalor img {
    display: block;
    margin: 3em auto;
    width: 100%;
  }
  .tablabibliotecas {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
  }
  .beneficioscostos {
    width: 85%;
  }
  .overall {
    font-size: 10px;
    padding: 10px;
    text-align: justify;
  }
}