@font-face {
    font-family: 'Barlow-Bold';
    src: URL('font/Barlow-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Barlow-Regular';
    src: URL('font/Barlow-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Barlow-Light';
src: URL('font/Barlow-Light.ttf') format('truetype');
}
body {
    font-family: "Barlow-Regular";
  }
h2{
    font-family: 'Barlow-Bold';
    font-size: 40pt;
    color: #790082;
    margin: 5px 0px;
}
h3{
    font-family: 'Barlow-Bold';
    font-size: 25pt;
    color: #3d0041;
    margin: 0;
}
a{
    color: #1252B2;
    text-decoration: none;
}
#title span{
    font-family: 'Barlow-Regular';
    font-size: 17pt;
    color: #3d0041;
    margin-top: 10px;
}
.title-section{
    font-size: 20pt;
    font-family: 'Barlow-Bold';
}
#header{
    width: 100%;
    /* height: 300px; */
    /* border: solid 1px black; */
    background-image: url('../img/Recurso\ 41.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
#participants{
    width: 100%;
    /* height: 300px; */
    background-color: #94339B;
    background-image: url('../img/Recurso\ 42.png');
    background-size: 99%;
    background-position: center;
    background-repeat: no-repeat;

}
#data{
    width: 100%;
    /* height: 300px; */
    /* border: solid 1px black; */
}
#container-data{
    display: flex;
    width: 80%;
    margin: 0 auto;
    justify-content: space-between;
    /* flex-wrap: wrap; */
}
#container-data div{
    /* height: 450px; */
}
/* #container-data div img{
    height: 400px;
} */
#categories{
    /* width: 100%; */
    /* height: 700px; */
    background-color: #F7931E;
    padding: 20px;
    background-image: url(../img/Recurso\ 45.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
#award{
    width: 100%;
    /* height: 300px; */
    background-color: #94339B;
    background-image: url(../img/Recurso\ 46.png);
    background-size: 115%;
    background-position: center;
    background-repeat: no-repeat;
}
#committee{
    width: 100%;
    height: 500px;
    /* border: solid 1px black; */
    background-image: url(../img/Recurso\ 47.png);
    background-size: 105%;
    background-position: center;
    background-repeat: no-repeat;
}
#institutions{
    display: flex;
    width: 90%;
    margin: 1% auto;
    /* border: solid 1px green; */
    justify-content: center;
}
.institution{
    width: 15%;
    margin: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.institution img{
    /* width: 130px; */
    /* height: 113px; */
}
#content{
    width: 60%;
    margin: 0 auto;
}
#title{
    color: #94339B;
    text-align: center;
}
#description{
    color: #4d4d4d;
    font-family: 'Barlow-Regular';
    font-size: 15pt;
    text-align: justify;
    margin: 40px 0px;
}
#title-participants{
    color: white;
    width: 50%;
    text-align: center;
    margin: 20px auto;
    padding: 20px;;
}
#numerals{
    margin: 30px auto;
    display: flex;
    justify-content: center;
}

.numeral{
    color: white;
    width: 20%;
    /* display: flex; */
    justify-content: center;
}
.container-data{
    display: flex;
    width: 100%;
    justify-content: center;
}
.data-numeral{
    border: solid 5px white;
    border-radius: 50%;
    height: 120px;
    width: 120px;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 25pt;
    font-family: 'Barlow-Bold';
}
.text-numeral{
    font-size: 15pt;
    width: 100%;
    text-align: center;
    padding: 20px 0px;
    font-family: 'Barlow-Regular';
}
#title-category{
    color: white;
    width: 60%;
    margin: 0 auto;
    padding: 20px;
    /* border: solid 1px black; */
    text-align: center;
}

.subtitle-category{
    color: #FFFFFF;
    font-size: 18pt;
    font-family: 'Barlow-Bold';
    text-align: center;
}

#grid-categories{
    width: 90%;
    margin: 20px auto;
}

.category{
    width: 100%;
    margin: 20px 0px;
}

.winners{
    display: flex;
    flex-wrap: wrap;
    margin: 30px auto 0px auto;
    justify-content: space-evenly;
    margin: 30px 0px;
}

.img-winner{
    margin: 10px;
}
.img-winner img{
    width: 75%;
}

.winner{
    display: flex;
    margin: 15px 0px;
    width: 32%;
    border-radius: 15px;
    background-color: white;
    padding: 5px;
    box-shadow: 5px 5px 10px #ffffff;
}

.img-winner{
    /* width: 30%; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.information-winner{
    width: 90%;
    text-align: center;
}
.position{
    font-family: 'Barlow-Bold';
    font-size: 20pt;
    color: #2058BA;
    justify-content: center;
}
.name-winner{
    font-family: 'Barlow-Bold';
    font-size: 15pt;
    /* color: #FFFFFF;  */
    cursor: pointer;
}
.country-winner{
    font-family: 'Barlow-Regular';
    font-size: 13pt;
    /* color: #FFFFFF;  */
}
.name-work{
    font-family: 'Barlow-Regular';
    font-size: 12pt;
    color: #2058BA; 
    text-align: center;
}
.name-work a{
    text-decoration: none;
}#title-award{
    color: white;
    width: 50%;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
}
#date{
    color: #FFFFFF;
    margin: 0 auto;
    text-align: center;
    font-size: 17pt;
    font-family: 'Barlow-Bold';
    padding: 20px;
}
.description-award{
    color: white;
    font-size: 15pt;
    font-family: 'Barlow-Regular';
    text-align: justify;
    width: 80%;
    margin: 0 auto;
    padding: 40px;
}
#title-committee{
    color: #3d0041;
    font-size: 20pt;
    font-family: 'Barlow-Bold';
    width: 50%;
    text-align: center;
    margin: 0 auto;
    padding: 20px;
}
#container-committee{
    margin: 0 auto;
    width: 75%;
    display: flex;
}
.container-members{
    width: 50%;
}
.member{
    margin: 10px;
    text-align: center;
}

.member span{
    font-size: 15pt;
    font-family: 'Barlow-Regular';
}

.name-member{
    font-family: 'Barlow-Bold'!important;
    font-size: 18pt!important;
}

.title-footer{
    font-size: 11pt;
    font-family: 'Barlow-Regular';
    color: #4d4d4d;
    width: 50%;
    text-align: center;
    margin: 0 auto;
}
.subtitle-footer{
    font-size: 11pt;
    font-family: 'Barlow-Regular';
    color: #4d4d4d;
    width: 50%;
    text-align: center;
    margin: 0 auto;
}
.date-footer{
    font-size: 11pt;
    font-family: 'Barlow-Regular';
    color: #4d4d4d;
    width: 50%;
    text-align: center;
    margin: 0 auto;
}
#chartdiv {
    width: 70%;
    height: 400px;
  }

  #chartdiv2 {
    width: 60%;
    height: 400px
  }

  .note{
    color: white;
    font-size: 12pt;
    font-family: 'Barlow-Regular';
  }
  .institution-winner{
    font-family: 'Barlow-Regular';
    font-size: 13pt;
    /* color: #FFFFFF; */
  }
.third-place{
    background-color: #FFFFFF;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 5px 5px 10px #ffffff;
    margin: 0 auto;
}
.winner-special{
    width: 45%;
    margin: 10px;
}
.winner-two{
    display: flex;
    margin: 15px 0px;
    border-radius: 15px;
    background-color: white;
    padding: 5px;
    box-shadow: 5px 5px 10px #ffffff;
}
.img-winner img{
    display: none;
}
.title-card{
    width: 100%;
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
}
#section-lang{
    width: 80%; 
    margin: 0 auto; 
    display: flex; 
    justify-content: flex-end;
}
.button-lang{
    margin: 0px 10px;
    font-family: 'Barlow-Bold';
}
.link-lang{
    color: #3d0041;
    text-decoration: none;
}
.container-flag{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: -25px;
}
.container-title{
    width: 100%;
    text-align: center;
}
.title-program{
    font-family: 'Barlow-Bold';
}
  /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    #institutions{
        width: 90%;
        flex-wrap: wrap;
    }
    .institution img {
        width: 55px;
    }
    #content {
        width: 80%;
    }
    h2 {
        font-size: 23pt;
    }
    h3 {
        font-size: 16pt;
    }
    #title span {
        font-size: 14pt;
        margin-top: 10px;
    }
    #description {
        font-size: 12pt;
    }
    .title-section {
        font-size: 15pt;
    }
    #numerals {
        margin: 30px auto;
        flex-wrap: wrap;
    }
    .numeral {
        width: 45%;
        margin: 0px 6px;
    }
    .container-data {
        width: 100%;
    }
    .text-numeral {
        font-size: 11pt;
        width: 100%;
    }
    #container-data {
        width: 90%;
        flex-wrap: wrap;
    }
    #chartdiv {
        width: 100%;
    }
    #chartdiv {
        width: 100%;
    }
    #title-category {
        width: 90%;
    }
    .subtitle-category {
        font-size: 15pt;
    }
    .position {
        font-size: 16pt;
    }
    .name-winner {
        font-size: 14pt;
    }
    .country-winner {
        font-size: 12pt;
    }
    .name-winner {
        font-size: 14pt;
    }
    .position {
        font-size: 15pt;
    }
    #title-award {
        width: 80%;
    }
    .title-section {
        font-size: 15pt;
    }
    .description-award {
        font-size: 12pt;
        width: 80%;
        padding: 32px;
    }
    #title-committee {
        font-size: 15pt;
        width: 76%;
    }
    .container-members {
        width: 100%;
    }
    #container-committee {
        width: 80%;
        flex-wrap: wrap;
    }
    .member {
        margin: 15px;
    }
    .member span {
        font-size: 12pt;
    }
    .title-footer {
        font-size: 10pt;
        width: 90%;
    }
    .subtitle-footer {
        font-size: 10pt;
        width: 90%;
        margin: 5px auto;
    }
    #date {
        font-size: 14pt;
    }
    #title-participants {
        width: 80%;
    }
    .winner {
        width: 100%;
    }
    .winner-special{
        width: 100%;
    }
    .third-place{
        width: 90%;
        margin: 0;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

    #institutions{
        flex-wrap: wrap;
    }
    .institution {
        width: 20%;
    }
    .institution img {
        /* width: 118px; */
    }
    #numerals {
        margin: 30px auto;
        flex-wrap: wrap;
    }
    .numeral {
        width: 45%;
        margin: 0px 6px;
    }
    #container-data{
        width: 90%;
        flex-wrap: wrap;
    }
    #chartdiv {
        width: 70%;
        height: 400px;
        margin: 0 auto;
      }
    #chartdiv2 {
        width: 50%;
        height: 400px;
        margin: 0 auto;
    }
    .winner {
        width: 80%;
    }
    .winner-special{
        width: 100%;
    }
    .third-place{
        width: 80%;
        margin: 0;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    #institutions{
        flex-wrap: wrap;
    }
    .institution {
        width: 20%;
    }
    .institution img {
        width: 118px;
    }
    #numerals {
        margin: 30px auto;
        flex-wrap: wrap;
    }
    .numeral {
        width: 45%;
        margin: 0px 6px;
    }
    #container-data{
        width: 90%;
        flex-wrap: wrap;
    }
    #chartdiv {
        width: 70%;
        height: 400px;
        margin: 0 auto;
      }
    #chartdiv2 {
        width: 50%;
        height: 400px;
        margin: 0 auto;
    }
    .third-place{
        margin: 0;
    }
    #container-committee{
        width: 80%;
        flex-wrap: wrap;
    }
    .container-members {
        width: 100%;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    #institutions{
        flex-wrap: inherit;
    }
    #numerals {
        margin: 30px auto;
        flex-wrap: inherit;
    }
    .numeral {
        width: 20%;
        margin: 0px 6px;
    }
    #container-data{
        flex-wrap: inherit;
    }
    #chartdiv {
        width: 50%;
        height: 400px;
      }
    
      #chartdiv2 {
        width: 50%;
        height: 400px
      }
      .winner{
        width: 31%;
    }
    .winner-special{
        width: 45%;
    }
    .third-place{
        margin: 0 auto;
    }
    .institution img {
        width: 100%;
    }
    .container-members {
        width: 50%;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    #institutions{
        flex-wrap: inherit;
    }
    #container-data{
        flex-wrap: inherit;
    }
    #chartdiv {
        width: 70%;
        height: 400px;
    }
    #chartdiv2 {
        width: 50%;
        height: 400px
    }
    .winner{
        width: 31%;
    }
    .winner-special{
        width: 45%;
    }
    .container-members {
        width: 50%;
    }
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    border-radius: 15px;
  }
  
  /* The Close Button */
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

  #container-info-modal{
    display: flex;
  }
  #img-modal{
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #info-modal{
    width: 75%;
  }
  #title-modal{
    font-family: 'Barlow-Bold';
    font-size: 18pt;
    margin: 20px 0px;
  }
  #text-modal{
    text-align: justify;
    /* justify-content: center; */
    font-family: 'Barlow-Regular';
    font-size: 12pt;
  }
  #social{
    margin: 15px 0px;
  }
  #social a img {
      width: 30px;
  }
/*Estilo de la sección de consultar el libro de ensayos*/
#consulta-libro{
    width: 100%;
    height: 550px;
    background-image: url('../img/img_fondo_libro-concurso-oa-week-2022.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: justify;
    display: grid;
    grid-template-columns: 44% 45%;
    margin-bottom: -20px;
}
#contenedor-consulta{
    width: 100%;
    grid-column: 2;
    margin-top: 100px;
}
#titulo-consulta{
    font-size: 16pt;
    font-weight: bold;
    color: white;
}
#subtitulo-consulta{
    font-size: 12pt;
    color: white;
    margin: 20px 0;
}
#fin-consulta
{
    font-size: 12pt;
    margin-bottom: 30px;
}
#boton-consulta{
    text-decoration: none;
    font-size: 12pt;
    color: white;
    text-align: center;
    padding: 10px 20px;
    border-radius: 30px;
    background-color: #94339B;
}
/*Fin del estilo de la sección de consultar el libro de ensayos*/