/****** IMPORTANTE: usar con netquest-brand_child.css ******/
.article-title-link{
  cursor: inherit;
}
.articles__blog__text__button {
  padding: 28px 0;
}
.container-articles-kb {
    flex: 1;
    list-style: none;
    margin: 0;
    padding-top: 146px;
}
.grid-articles {
    margin: 0 auto;
    max-width: 1196px!important;
}
.article-kb {
    align-items: flex-start;
    display: flex !import;
    flex-basis: 510px;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 52px 0;
}
.article-kb-img img {
  object-fit: cover;
}

.article-category-kb {
    text-transform: uppercase;
    margin: 48px 0px 16px;
    font-weight: 700;
}
.article-title-kb {
    margin-bottom: 32px;
}
.two-columns {
    align-items: center;
    flex-basis: 100%;
    flex-direction: row;
    display: flex;
}
.text-image-col {
  order: 2;
}
.wider-col {
  flex-basis: 586px;
}
.article-kb-img.text-image-col img {
  max-width: 586px;
  margin-left: 259px;
}
.image-text-col img{
  max-width: 586px;
  margin-right: 259px;
}
@media (max-width: 1232px)  {
  .article-kb {
    flex-basis: 100% !important;
}
  .article-kb.two-columns {
    flex-direction: column;
}
.article-kb-img.text-image-col img,
.image-text-col img{
  max-width: 100%;
  margin: 0;
}
.article-kb-img img {
    height: 400px!important;
    max-width: 100%;
    width: 1200px;
}
.text-image-col {
    order: initial;
}
}
  @media (max-width: 600px) {
    .article-kb {
    padding: 32px 0;
    }
 .article__text__container {
    padding-top: 32px !important;
}
.article-kb-img img {
  height: 280px!important;
}
.article-category-kb {
    margin: 0;
}
.article-title-kb h5 {
    font-size: 24px;
  }

}

/* filter and search container*/
.container-relative {
  position: relative;
}
.container-search-filter.display-flex.justify-between.direction-row {
    position: absolute;
    top: 0;
    margin: 0 auto;
    max-width: 1196px;
    left: 0;
    right: 0;
    z-index: 10000;
    padding: 5.5rem 0;
}

/* filters */

.hide { /* You can play with the seconds to change the "animation" */
  animation: hide .5s ease 0s 1 normal forwards;
  transform-origin: center;
  flex-basis: 0px;
  padding: 0;
}
.show { /* You can play with the seconds to change the "animation" */
    animation: show .5s ease 0s 1 normal forwards;    
    transform-origin: center;
    display: flex;
}

@keyframes hide {
  0%{
    transform: scale(1);        
  }
  100% {
    transform: scale(0);        
    width: 0;
    height: 0;
    margin: 0;
  }
}
@keyframes show {
  0%{
    transform: scale(0);     
    width: 0;
    height: 0;
    margin: 0;   
  }
  100% {
    transform: scale(1);    
  }
}


.filter {
   margin: 2px;
}
.filter:hover {
  cursor: pointer;
}
.active {
  color: #37d4c8;
}

/*dropdown*/

.dropdown {
  width: 432px;
  display: inline-block;
  margin-right: 10px;
  position: relative;
  margin-top: 18px;
}
.dropdown.toggle > input {
  display: none !important;
}
.dropdown > a::after, .dropdown.toggle > label::after {
    content: "";
    position: absolute;
    right: 0;
    z-index: 11;
    display: block;
    width: 8px;
    height: 8px;
    float: right;
    top: 14px;
    transform: rotate(225deg);
}
/*.dropdown ul{
  display: block;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  box-shadow: 0 6px 5px -5px rgba(0,0,0,0.3);
  overflow: hidden;
}*/
.dropdown a, .dropdown.toggle > label {
  display: block;
  padding: 0 0 0 10px;
  text-decoration: none;
  background-color: #FFF;
  min-height: 40px;
}
.dropdown li {
  height: 0;
  overflow: hidden;
  transition: all 500ms;
}
.dropdown.hover li {
  transition-delay: 300ms;
}
.dropdown li:first-child a {
  border-radius: 2px 2px 0 0;
}
.dropdown li:last-child a {
  border-radius: 0 0 2px 2px;
}
.dropdown > a:hover::after, .dropdown.toggle > label:hover::after, .dropdown.toggle > input:checked ~ label::after {
  border-top-color: #AAA;
}
.dropdown a:hover, .dropdown.toggle > label:hover, .dropdown.toggle > input:checked ~ label {
  color: #666;
}
.dropdown li:first-child a:hover::before {
  border-bottom-color: #EEE;
}
.dropdown.hover:hover li, .dropdown.toggle > input:checked ~ ul li {          
  height: 40px;
  display: flex;
  align-items: center;
}
div#cards-filter ul {
    padding: 0;
}


/*SEARCH*/
div#search {
    display: flex;
}
input#searchInputArticles{
  font-family: var(--font-family-base);
  font-size: var(--font-lg);
  line-height: var(--line-height-lg);
  font-weight: var(--font-regular);
}

@media (max-width: 1198px) {
  .container-search-filter.display-flex.justify-between.direction-row {
    padding: 4rem 3rem;
}
}
@media (max-width: 1018px) {
  .container-search-filter {
    flex-direction: column !important;
}
  div#cards-filter {
    margin-top: 32px;
}
  .dropdown {
    margin-top: 0;
  }
  .search-container, .dropdown {
    width: 100% !important;
}

}


/*LOAD MORE */
.load__btn {
  text-align: center;
}
.load-more {
  display: none;
}
.display {
	display: flex;
}
.noContent {
  color: #000 !important;
  background-color: transparent !important;
  pointer-events: none;
}