/*
Theme Name: Mens en relatie
Theme URI: http://www.helloitsme.online
Description: Mens en relatie
Author: Hello it's me
Author URI: http://www.helloitsme.online
Version: 1
*/

@import url("css/css.css");
@import url("css/slick.css");
@import url("css/lightbox.min.css");

.arrow{
  display:none;
}
.blogberichten {
    /* position:relative; */
    margin-top:2em;
    z-index:10;
    display:flex;
    flex-wrap:wrap;
    align-items: stretch;
    gap:40px;
    margin-bottom:2em;
    
    .blogbericht {
      /* flex:1 1 26%; */
      max-width:320px;
      padding:20px;
      background:#fff;
      border-radius: 4px;
      -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
      box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
      
      &:hover {
        .transform(translateY(-5px));
      }
      
      .blogbericht_thumbnail {
        height:200px;
        .backgroundcover;
      }
      
      .blogbericht_content {
        padding:20px 0 0 0;
        
        h4 {
          color:@yellow;
        }
        
        .intro {
          margin:0 0 15px 0;
          color:#000;
        }
        
        .link {
          color:@bluedark;
        }
      }
    }
  }
}


.nieuwsbrief{
   display: flex;
   justify-content: center;
 }
 @media only screen and (max-width: 959px) {
 
 .nieuwsbrief{
   /* margin-left: 3% ; */
 }
 }

.rating {
    display: flex;
    justify-content: center;
    margin-bottom:25px;

    span.subtitle{
      color: #daa521;
      font-size: 16px;
      font-family: 'Poppins', Helvetica, Arial;
    }
}
img.post-ratings-image{
  height:25px;
}
.rating-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.post-ratings img {
    height: 20px;
}
.leestijd-icon{
  width:32px;
}
.blog-elements {
    display: flex
;
    /* align-content: center; */
    align-items: flex-end;
}
.filter-btn {
  height: 34px;
  border: 1px solid #D9D9D9;
  border-radius: 30px;
  background-color: transparent;
  padding: 8px 15px;
  font-size: 14px;
  color: #0D2B4D; /* Donkerblauw */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  width: fit-content;
  font-weight: 400;
  display: inline-flex;
	align-items: center;



}

.filter-btn.active,
.filter-btn:hover {
  background-color: #DAA521;
  color: #fff;
  border-color: #DAA521;
  /* font-weight: 700; */
  /* width: fit-content; */
  width:max-content;


}
.leestijd-label{
	margin-top:1px;
}

.blog-label {
  height: 24px;
  border: 1px solid #D9D9D9;
  border-radius: 30px;
  background-color: white;
  color: #0D2B4D;
  font-size: 14px;
  padding: 4px 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
}

.blogbericht_thumbnail {
  position: relative;
  background-size: cover;
  background-position: center;
  /* height: 200px; /* of jouw gewenste hoogte */
  border-radius: 8px; 
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
}


.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.mobile_padding{
padding-top:0em; 
} 



/* Standaard altijd zichtbaar op desktop */
.footer_div .dropdown-menu {
	display: block;
}

@media (max-width: 768px) {
  .arrow{
    display:block;
  }
  .mobile_padding{
    padding-top:15em;
  }
	.footer_div .dropdown-toggle {
		cursor: pointer;
		position: relative;
		padding-right: 20px;
	}

	.footer_div .arrow {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		font-size: 14px;
		color: white;
	}

	.footer_div .dropdown-menu {
		display: none;
		margin-top: 10px;
	}

	.footer_div.open .dropdown-menu {
		display: block;
	}
}