@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
/* COLOURS */

:root {
    --gris: #3F3F3F;
    --verde: #C0CE17;
    --aqua: #008D96;
    --cemento: #f3f3f3;
    --grisclaro: #7F848A;
    --violeta: #5C315E;
    --azulmarino: #352C63;
    --naranja: #FB7633;
  }

body {
    font-family: 'Work Sans', sans-serif;
    color: #2a2a2b;
}

.fa {
    display: none;
}

.article-filter-container{
    display:table-header-group
}

.article-list-filters {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.article-filter-item{
    margin:5px 2px;
    border:1px solid #707070;
    color:#707070;
    padding:4px 20px 4px 16px
}

.article-filter-container{
    margin-bottom:33px
}
.article-filter-item.active{
    background-color:var(--aqua);
    font-family: 'Work Sans', sans-serif;
}
.article-list-container .load-more-container .btn.btn-default{
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    color: white !important;
    background: var(--aqua);
    border: 3px solid var(--aqua);
    border-radius: 2.5rem;
    padding: 1% 3%;
    font-size: 1.25rem;
    margin-top: 4%;
}
.html-container.article-list-items{
    text-align:center;
}
.article-list-container .article-title-container{
    font-weight:400;
}


.article-item-link{
    height:auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 75%;
}

.article-filter-container .visible-xs{
    display:none!important;
}
.article-list-filter-holder.collapse{
    display: inline-block;
    vertical-align: middle;
}
.article-filter-item{
    margin:5px 2px;
    border:1px solid var(--aqua);
    color:var(--aqua);
    padding:4px 25px 4px 21px;
}


.article-item {
    width: 33%;
    background-size: cover;
    background-repeat: no-repeat;
    height: auto;
    display: inline-block;
}

.container-notas,
.container-articulo {
  padding-bottom: 4%;
  background-color: var(--cemento);
}

.container-notas h3,
.container-articulo h3 {
  font-weight: 700;
  font-size: 16px;
  line-height: 27px;
  color: black;
  text-transform: uppercase;
  display: inline;
  font-family: "Roboto", sans-serif;
  padding: 3px 0px;

}

.container-notas p{
    color: var(--gris);
}

.container-notas h4,
.container-articulo h4 {
  font-size: 1.5625rem;
  line-height: 1.25;
  font-weight: 700;
  color: #171717;
  text-transform: uppercase;
  margin-top: 4%;
}

.container-notas .botones-notas {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.botones-notas .btn {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  color: white !important;
  background: var(--verde);
  border: 3px solid var(--verde);
  border-radius: 2.5rem;
  padding: 2% 10%;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.btn:hover {
  color: var(--verde) !important;
  background: var(--cemento);
}

.container-testing {
    background-color: #F2F2F3;
}

.container-testing .list-item-0 {
    display: flex;
    justify-content: center;
    align-content: center;
}

.container-testing .botones-notas .btn {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    color: white !important;
    background: var(--verde);
    border: 3px solid var(--verde);
    border-radius: 2.5rem;
    padding: 1% 3%;
    font-size: 1.25rem;
    text-transform: uppercase;
    text-decoration: none;
}

.container-testing .btn:hover {
  color: var(--verde) !important;
  background: var(--cemento);
  text-decoration: none;
}
.container-testing img {
    margin: 5% 0;
}

@media (max-width: 768px) {

    .article-list-filters {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .article-item {
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        height: auto;
        display: inline;
    }
    .article-item-link {
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 0;
        width: 80%;
    }

    .container-notas img {
        vertical-align: middle;
    }

    .container-notas .botones-notas {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .container-testing img {
    margin: 15% 0;
    }
}