* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #000000;
}

@media (min-width: 2560px) {
  #logonav-riev {
    width: 500px;
    margin: 10px 150px 10px 600px;
  }

  #cinta {
    width: 100%;
    background-color: #0d0e30;
    color: rgb(255, 255, 255);
    height: 200px;
    display: flex;
  }

  .tarjeta1 {
    width: 550px;
    margin: 50px 80px 50px 600px;
    padding: 0;
    /* background-color: rgb(238, 224, 131); */
    text-align: center;
    align-content: center;
  }

  .tarjeta1 h1 {
    font-size: 40px;
  }

  .tarjeta2 {
    width: 500px;
    margin: 50px;
    /* 
        background-color: rgb(30, 240, 82); */
    text-align: center;
    align-content: center;
  }

  .tarjeta2 h2 {
    font-size: 20px;
  }

  .tarjeta2 a {
    color: white;
  }

  #busqueda {
    /*  background-color: yellowgreen; */
    width: 200px;
    height: auto;
    margin: 30px 640px;
  }

  #busqueda .btn {
    background-color: #228b22;
    border-color: #228b22;
  }

  .card {
    background-color: rgb(255, 255, 255);
    width: 1300px;
    border: none;
  }

  .card-body {
    /* background-color: yellow; */
    width: 1050px;
    align-items: center;
    align-content: center;
  }

  #banderas {
    display: inline-flex;
  }

  #banderas .tarjeta {
    /* background-color: rgb(207, 151, 30);  */
    width: 500px;
    height: 120px;
    text-align: center;
    margin: 10px;
    border: #d1d1d1 solid 1px;
    border-radius: 5px;
  }
  .bandera {
    width: 60px;
  }

  #banderas {
    display: flex;
    flex-wrap: wrap;
    /* Permite que las tarjetas se ajusten al ancho del contenedor */
    gap: 10px;
    /* Espacio entre las tarjetas */
    margin: 20px 0;
  }

  .bandera {
    max-width: 100%;
    /* Asegura que las banderas se ajusten al ancho del contenedor */
    height: auto;
    /* Mantiene la proporción de la imagen */
    width: 50px;
  }

  .tarjeta {
    flex-basis: 7%;
    /* Cada tarjeta ocupará el 48% del ancho, dejando espacio para dos por fila */
    border: #d1d1d1 solid 1px;
    border-radius: 5px;
    height: 110px;
  }

  #tablasEvaluadores {
    /* background-color: chocolate; */
    margin: 10px 0px;
    padding: 5px 850px 5px 630px;
    text-align: center;
    
  }
  .banderatabla {
    width: 30px;
  }
  table.table thead th {
    background-color: #0e0f2e !important;
    color: white !important;
    text-align: center;
    width: 100px;
  }
  .pais {
    text-align: center;
    align-content: center;
  }
  .bi{
   font-size: 25px;
  }

  #pie_pagina {
    width: 100%;
    height: 500px;
    background-color: #0d0e30;
    color: rgb(255, 255, 255);
    display: flex;
    align-content: center;
    align-items: center;
  }

  #pie_pagina .tarjeta-pie {
    /* 
        background-color: yellow; */
    width: 300px;
    height: 300px;
    margin: 20px 0 0 670px;
  }

  #pie_pagina .tarjeta-pie #logo_riev {
    width: 200px;
  }

  .tarjeta-pie2 {
    /* 
    background-color: red; */
    width: 350px;
    height: 250px;
    font-size: 24px;
  }

  .tarjeta-pie2 h3 {
    text-align: center;
  }

  .tarjeta-pie2 a {
    text-decoration: none;
    color: rgb(255, 255, 255);
  }

  .tarjeta-pie2 .bi {
    color: rgb(255, 255, 255);
  }

  .tarjeta-pie3 a {
    color: #ffff;
  }
}

@media (min-width: 1440px) and (max-width: 2559px) {
  #logonav-riev {
    width: 500px;
    margin: 10px 280px 10px 100px;
  }

  #cinta {
    width: 100%;
    background-color: #0d0e30;
    color: rgb(255, 255, 255);
    height: 120px;
    display: flex;
    align-items: center;
  }

  .tarjeta1 {
    width: 700px;
    margin: 20px 370px 20px 20px;
    /* 
        background-color: rgb(238, 224, 131); */
    text-align: center;
    align-content: center;
  }

  .tarjeta1 h1 {
    font-size: 40px;
  }

  .tarjeta2 {
    width: 250px;
    margin: 50px 0px;
    /* 
        background-color: rgb(30, 240, 82); */
    text-align: center;
    align-content: center;
  }

  .tarjeta2 h2 {
    font-size: 15px;
  }

  .tarjeta2 a {
    color: white;
  }

  #busqueda {
    /* 
    background-color: yellowgreen; */
    padding: 20px 120px;
  }

  #busqueda .btn {
    background-color: #228b22;
    border-color: #228b22;
  }

  #banderas {
    display: inline-flex;
  }

  #banderas .tarjeta {
    /* 
    background-color: rgb(207, 151, 30); */
    width: 150px;
    height: 110px;
    text-align: center;
    margin: 8px;
    border: #d1d1d1 solid 1px;
    border-radius: 5px;
  }

  .bandera {
    width: 60px;
  }

  #tablasEvaluadores {
    /* 
    background-color: chocolate; */
    margin: 5px 0px;
    padding: 5px 180px 10px 120px;
    text-align: center;
  }

  .banderatabla {
    width: 30px;
  }

  table.table thead th {
    background-color: #0e0f2e !important;
    color: white !important;
    text-align: center;
    width: 100px;
  }

  .pais {
    text-align: center;
    align-content: center;
  }

  .bi{
    font-size: 25px;
   }

  #pie_pagina {
    width: 100%;
    height: 400px;
    background-color: #0d0e30;
    color: rgb(255, 255, 255);
    display: flex;
    align-content: center;
    align-items: center;
  }

  #pie_pagina .tarjeta-pie {
    /* 
        background-color: yellow; */
    width: 300px;
    height: 300px;
    margin: 20px 50px 0 200px;
    text-align: center;
  }

  #pie_pagina .tarjeta-pie #logo_riev {
    width: 130px;
  }

  .tarjeta-pie2 {
    /* 
    background-color: red; */
    width: 350px;
    height: 250px;
  }

  .tarjeta-pie2 h3 {
    text-align: justify;
    font-size: 20px;
  }

  .tarjeta-pie2 h4 {
    font-size: 17px;
  }

  .tarjeta-pie2 a {
    text-decoration: none;
    color: rgb(255, 255, 255);
  }

  .tarjeta-pie2 .bi {
    color: rgb(255, 255, 255);
  }

  .tarjeta-pie3 h4 {
    font-size: 20px;
    text-align: justify;
  }

  .tarjeta-pie3 a {
    margin: 3px 10px;
    color: #ffff;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  #logonav-riev {
    width: 350px;
    margin: 10px 400px 10px 50px;
  }

  #cinta {
    width: 100%;
    background-color: #0e0f2e;
    color: rgb(255, 255, 255);
    height: 120px;
    display: flex;
    align-items: center;
    align-content: center;
  }

  .tarjeta1 {
    width: 450px;
    margin: 50px 580px 50px 30px;
    /* lleva 800  */
   /*  background-color: rgb(238, 224, 131); */
    text-align: center;
    align-content: center;
  }

  .tarjeta1 h1 {
    font-size: 2em;
  }

  .tarjeta2 {
    width: 200px;
    height: 50px;
    margin: 0px 10px;
    /* 
        background-color: rgb(30, 240, 82); */
    align-content: center;
  }

  .tarjeta2 h2 {
    font-size: 12px;
  }

  .tarjeta2 a {
    color: white;
  }

  #busqueda {
    /* 
    background-color: yellowgreen; */
    padding: 20px 70px;
  }

  #busqueda .btn {
    background-color: #228b22;
    border-color: #228b22;
  }

  #banderas {
    display: inline-flex;
  }

  #banderas .tarjeta {
    /* 
    background-color: rgb(207, 151, 30); */
    width: 150px;
    height: 110px;
    text-align: center;
    margin: 8px;
    border: #d1d1d1 solid 1px;
    border-radius: 5px;
  }

  .bandera {
    width: 60px;
  }

  #tablasEvaluadores {
    
    /* background-color: chocolate; */
    margin: 5px 0px;
    padding: 5px 100px 10px 70px;
    align-content: center;
    text-align: justify;
  }

  .banderatabla {
    width: 30px;
  }

  table.table thead th {
    background-color: #0e0f2e !important;
    color: white !important;
    text-align: center;
    width: 100px;
  }

  .pais {
    text-align: center;
    align-content: center;
  }

  .bi{
    font-size: 25px;
   }

  #pie_pagina {
    width: 100%;
    height: 400px;
    background-color: #0d0e30;
    color: rgb(255, 255, 255);
    display: flex;
    align-content: center;
    align-items: center;
    padding: 0px 100px;
  }

  #pie_pagina .tarjeta-pie {
    /* 
        background-color: yellow; */
    width: 300px;
    height: 300px;
    margin: 20px 50px 0 90px;
    text-align: center;
  }

  #pie_pagina .tarjeta-pie #logo_riev {
    width: 120px;
  }

  .tarjeta-pie2 {
    /* 
    background-color: red; */
    width: 250px;
    height: 250px;
    font-size: 17px;
  }

  .tarjeta-pie2 h3 {
    font-size: 17px;
  }

  .tarjeta-pie2 h4 {
    font-size: 17px;
  }

  .tarjeta-pie2 a {
    text-decoration: none;
    color: rgb(255, 255, 255);
  }

  .tarjeta-pie2 .bi {
    color: rgb(255, 255, 255);
    width: 100px;
  }

  .tarjeta-pie3 h4 {
    font-size: 17px;
  }

  .tarjeta-pie3 a {
    color: #ffff;
    margin: 0px 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #logonav-riev {
    width: 350px;
  }

  #cinta {
    width: 100%;
    background-color: #0d0e30;
    color: rgb(255, 255, 255);
    height: 120px;
    align-items: center;
    text-align: center;
    align-content: center;
    padding: 0 32.5%;
  }

  .tarjeta1 {
    width: 250px;
    text-align: center;
    align-content: center;
  }

  .tarjeta1 h1 {
    font-size: 2em;
  }

  .tarjeta2 {
    width: 250px;
    text-align: center;
    align-content: center;
  }

  .tarjeta2 h2 {
    font-size: 12px;
  }

  .tarjeta2 a {
    color: white;
  }

  #busqueda {
    /* 
        background-color: yellowgreen; */
    text-align: center;
    padding: 30px 0;
  }

  #busqueda .btn {
    background-color: #228b22;
    border-color: #228b22;
  }

  #banderas {
    display: flex;
    flex-wrap: wrap;
    /* Permite que las tarjetas se ajusten al ancho del contenedor */
    gap: 10px;
    /* Espacio entre las tarjetas */
    margin: 10px 0;
  }

  .tarjeta {
    flex-basis: 100%;
    /* Hace que cada tarjeta ocupe el 100% del ancho por defecto */
    text-align: center;
  }

  .bandera {
    max-width: 100%;
    /* Asegura que las banderas se ajusten al ancho del contenedor */
    height: auto;
    /* Mantiene la proporción de la imagen */
    width: 50px;
  }

  .tarjeta {
    flex-basis: 48%;
    /* Cada tarjeta ocupará el 48% del ancho, dejando espacio para dos por fila */
    border: #d1d1d1 solid 1px;
    border-radius: 5px;
    height: 90px;
  }

  #tablasEvaluadores {
    /* 
        background-color: #228B22; */
    width: 100%;
    overflow: scroll;
  }
  .banderatabla {
    width: 35px;
  }

  table.table thead th {
    background-color: #0e0f2e !important;
    color: white !important;
    text-align: center;
    align-content: center;
    width: 100px;
    overflow: scroll;
  }
  .table tbody {
    text-align: center;
    overflow: scroll;
  }
  .bi{
    font-size: 25px;
   }


  #pie_pagina {
    width: 100%;
    height: 900px;
    background-color: #0d0e30;
    color: rgb(255, 255, 255);
    padding: 100px 0px;
    /*  display: flex; */
    /* align-content: center;
        align-items: center; */
  }

  #pie_pagina .tarjeta-pie {
    /* 
        background-color: yellow; */
    width: 300px;
    height: 200px;
    padding: 0px 40px;
  }

  #pie_pagina .tarjeta-pie #logo_riev {
    width: 120px;
  }

  .tarjeta-pie2 {
    /* 
    background-color: red; */
    width: 400px;
    height: 190px;
    font-size: 15px;
    padding: 0px 40px;
  }

  .tarjeta-pie2 h3 {
    font-size: 17px;
  }

  .tarjeta-pie2 h4 {
    font-size: 17px;
  }

  .tarjeta-pie2 a {
    text-decoration: none;
    color: rgb(255, 255, 255);
  }

  .tarjeta-pie2 .bi {
    color: rgb(255, 255, 255);
    width: 100px;
  }

  .tarjeta-pie3 {
    /* 
    background-color: aqua; */
    padding: 0px 40px;
    font-size: 17px;
  }

  .tarjeta-pie3 h4 {
    font-size: 17px;
  }

  .tarjeta-pie3 .bi {
    width: 500px;
  }

  .tarjeta-pie3 a {
    color: #ffff;
    margin: 0px 10px;
  }
}

@media (min-width: 425px) and (max-width: 767px) {
  #logonav-riev {
    width: 300px;
  }

  #cinta {
    width: 100%;
    background-color: #0d0e30;
    color: rgb(255, 255, 255);
    height: 120px;
    align-items: center;
    text-align: center;
    align-content: center;
    padding: 0 20%;
  }

  .tarjeta1 {
    width: 250px;
    text-align: center;
    align-content: center;
  }

  .tarjeta1 h1 {
    font-size: 2em;
  }

  .tarjeta2 {
    width: 250px;
    text-align: center;
    align-content: center;
  }

  .tarjeta2 h2 {
    font-size: 12px;
  }

  .tarjeta2 a {
    color: white;
  }

  #busqueda {
    /* 
        background-color: yellowgreen; */
    text-align: center;
    padding: 30px 0;
  }

  #busqueda .btn {
    background-color: #228b22;
    border-color: #228b22;
  }

  #banderas {
    display: flex;
    flex-wrap: wrap;
    /* Permite que las tarjetas se ajusten al ancho del contenedor */
    gap: 10px;
    /* Espacio entre las tarjetas */
    margin: 10px 0;
  }

  .tarjeta {
    flex-basis: 100%;
    /* Hace que cada tarjeta ocupe el 100% del ancho por defecto */
    text-align: center;
  }

  .bandera {
    max-width: 100%;
    /* Asegura que las banderas se ajusten al ancho del contenedor */
    height: auto;
    /* Mantiene la proporción de la imagen */
    width: 50px;
  }

  .tarjeta {
    flex-basis: 48%;
    /* Cada tarjeta ocupará el 48% del ancho, dejando espacio para dos por fila */
    border: #d1d1d1 solid 1px;
    border-radius: 5px;
    height: 90px;
  }

  #tablasEvaluadores {
    /* 
        background-color: #228B22; */
    width: 100%;
    overflow: scroll;
  }
  .banderatabla {
    width: 35px;
  }

  table.table thead th {
    background-color: #0e0f2e !important;
    color: white !important;
    text-align: center;
    align-content: center;
    width: 100px;
    overflow: scroll;
  }
  .table tbody {
    text-align: center;
    overflow: scroll;
  }
  .bi{
    font-size: 25px;
   }

  #pie_pagina {
    width: 100%;
    height: 900px;
    background-color: #0d0e30;
    color: rgb(255, 255, 255);
    padding: 100px 0px;
    /*  display: flex; */
    /* align-content: center;
        align-items: center; */
  }

  #pie_pagina .tarjeta-pie {
    /* 
        background-color: yellow; */
    width: 300px;
    height: 200px;
    padding: 0px 40px;
  }

  #pie_pagina .tarjeta-pie #logo_riev {
    width: 110px;
  }

  .tarjeta-pie2 {
    /* 
    background-color: red; */
    width: 400px;
    height: 190px;
    font-size: 15px;
    padding: 0px 40px;
  }

  .tarjeta-pie2 h3 {
    font-size: 17px;
  }

  .tarjeta-pie2 h4 {
    font-size: 17px;
  }

  .tarjeta-pie2 a {
    text-decoration: none;
    color: rgb(255, 255, 255);
  }

  .tarjeta-pie2 .bi {
    color: rgb(255, 255, 255);
    width: 100px;
  }

  .tarjeta-pie3 {
    /* 
    background-color: aqua; */
    padding: 0px 40px;
    font-size: 17px;
  }

  .tarjeta-pie3 h4 {
    font-size: 17px;
  }

  .tarjeta-pie3 .bi {
    width: 500px;
  }

  .tarjeta-pie3 a {
    color: #ffff;
    margin: 0px 10px;
  }
}

@media (min-width: 375px) and (max-width: 424px) {
  #logonav-riev {
    width: 250px;
  }

  #cinta {
    width: 100%;
    background-color: #0d0e30;
    color: rgb(255, 255, 255);
    height: 120px;
    align-items: center;
    text-align: center;
    align-content: center;
    padding: 0 16%;
  }

  .tarjeta1 {
    width: 250px;
    text-align: center;
    align-content: center;
  }

  .tarjeta1 h1 {
    font-size: 2em;
  }

  .tarjeta2 {
    width: 250px;
    text-align: center;
    align-content: center;
  }

  .tarjeta2 h2 {
    font-size: 12px;
  }

  .tarjeta2 a {
    color: white;
  }

  #busqueda {
    /* 
        background-color: yellowgreen; */
    text-align: center;
    padding: 30px 0;
  }

  #busqueda .btn {
    background-color: #228b22;
    border-color: #228b22;
  }

  #banderas {
    display: flex;
    flex-wrap: wrap;
    /* Permite que las tarjetas se ajusten al ancho del contenedor */
    gap: 10px;
    /* Espacio entre las tarjetas */
    margin: 10px 0;
  }

  .tarjeta {
    flex-basis: 100%;
    /* Hace que cada tarjeta ocupe el 100% del ancho por defecto */
    text-align: center;
  }

  .bandera {
    max-width: 100%;
    /* Asegura que las banderas se ajusten al ancho del contenedor */
    height: auto;
    /* Mantiene la proporción de la imagen */
    width: 50px;
  }

  .tarjeta {
    flex-basis: 48%;
    /* Cada tarjeta ocupará el 48% del ancho, dejando espacio para dos por fila */
    border: #d1d1d1 solid 1px;
    border-radius: 5px;
    height: 90px;
  }

  #tablasEvaluadores {
    /* 
        background-color: #228B22; */
    width: 100%;
    overflow: scroll;
  }
  .banderatabla {
    width: 35px;
  }

  table.table thead th {
    background-color: #0e0f2e !important;
    color: white !important;
    text-align: center;
    align-content: center;
    width: 100px;
    overflow: scroll;
  }
  .table tbody {
    text-align: center;
    overflow: scroll;
  }
  
  .bi{
    font-size: 25px;
   }

  #pie_pagina {
    width: 100%;
    height: 900px;
    background-color: #0d0e30;
    color: rgb(255, 255, 255);
    padding: 100px 0px;
    /*  display: flex; */
    /* align-content: center;
        align-items: center; */
  }

  #pie_pagina .tarjeta-pie {
    /* 
        background-color: yellow; */
    width: 300px;
    height: 200px;
    padding: 0px 40px;
  }

  #pie_pagina .tarjeta-pie #logo_riev {
    width: 110px;
  }

  .tarjeta-pie2 {
    /* 
    background-color: red; */
    width: 400px;
    height: 190px;
    font-size: 15px;
    padding: 0px 40px;
  }

  .tarjeta-pie2 h3 {
    font-size: 17px;
  }

  .tarjeta-pie2 h4 {
    font-size: 17px;
  }

  .tarjeta-pie2 a {
    text-decoration: none;
    color: rgb(255, 255, 255);
  }

  .tarjeta-pie2 .bi {
    color: rgb(255, 255, 255);
    width: 100px;
  }

  .tarjeta-pie3 {
    /* 
    background-color: aqua; */
    padding: 0px 40px;
    font-size: 17px;
  }

  .tarjeta-pie3 h4 {
    font-size: 17px;
  }

  .tarjeta-pie3 .bi {
    width: 500px;
  }

  .tarjeta-pie3 a {
    color: #ffff;
    margin: 0px 10px;
  }
}

@media (min-width: 320px) and (max-width: 374px) {
  #logonav-riev {
    width: 200px;
  }

  #cinta {
    width: 100%;
    background-color: #0d0e30;
    color: rgb(255, 255, 255);
    height: 120px;
    align-items: center;
    text-align: center;
    align-content: center;
    padding: 0 15%;
  }

  .tarjeta1 {
    width: 250px;
    text-align: center;
    align-content: center;
  }

  .tarjeta1 h1 {
    font-size: 2em;
  }

  .tarjeta2 {
    width: 250px;
    text-align: center;
    align-content: center;
  }

  .tarjeta2 h2 {
    font-size: 12px;
  }

  .tarjeta2 a {
    color: white;
  }

  #busqueda {
    /* 
        background-color: yellowgreen; */
    text-align: center;
    padding: 30px 0 0 0;
  }

  #busqueda .btn {
    background-color: #228b22;
    border-color: #228b22;
  }

  #banderas {
    display: flex;
    flex-wrap: wrap;
    /* Permite que las tarjetas se ajusten al ancho del contenedor */
    gap: 10px;
    /* Espacio entre las tarjetas */
    margin: 10px 0;
  }

  .tarjeta {
    flex-basis: 100%;
    /* Hace que cada tarjeta ocupe el 100% del ancho por defecto */
    text-align: center;
  }

  .bandera {
    max-width: 100%;
    /* Asegura que las banderas se ajusten al ancho del contenedor */
    height: auto;
    /* Mantiene la proporción de la imagen */
    width: 50px;
  }

  .tarjeta {
    flex-basis: 48%;
    /* Cada tarjeta ocupará el 48% del ancho, dejando espacio para dos por fila */
    border: #d1d1d1 solid 1px;
    border-radius: 5px;
    height: 110px;
  }

  #tablasEvaluadores {
    /* 
        background-color: #228B22; */
    width: 100%;
    overflow: scroll;
  }
  .banderatabla {
    width: 35px;
  }

  table.table thead th {
    background-color: #0e0f2e !important;
    color: white !important;
    text-align: center;
    align-content: center;
    width: 100px;
    overflow: scroll;
  }
  .table tbody {
    text-align: center;
    overflow: scroll;
  }
  .bi{
    font-size: 25px;
   }
  #pie_pagina {
    width: 100%;
    height: 900px;
    background-color: #0d0e30;
    color: rgb(255, 255, 255);
    padding: 100px 0px;
    /*  display: flex; */
    /* align-content: center;
        align-items: center; */
  }

  #pie_pagina .tarjeta-pie {
    /* 
        background-color: yellow; */
    width: 300px;
    height: 200px;
    padding: 0px 40px;
  }

  #pie_pagina .tarjeta-pie #logo_riev {
    width: 110px;
  }

  .tarjeta-pie2 {
    /* 
    background-color: red; */
    width: 400px;
    height: 190px;
    font-size: 15px;
    padding: 0px 40px;
  }

  .tarjeta-pie2 h3 {
    font-size: 17px;
  }

  .tarjeta-pie2 h4 {
    font-size: 17px;
  }

  .tarjeta-pie2 a {
    text-decoration: none;
    color: rgb(255, 255, 255);
  }

  .tarjeta-pie2 .bi {
    color: rgb(255, 255, 255);
    width: 100px;
  }

  .tarjeta-pie3 {
    /* 
    background-color: aqua; */
    padding: 0px 40px;
    font-size: 17px;
  }

  .tarjeta-pie3 h4 {
    font-size: 17px;
  }

  .tarjeta-pie3 .bi {
    width: 500px;
  }

  .tarjeta-pie3 a {
    color: #ffff;
    margin: 0px 10px;
  }
}