@charset "UTF-8";

/*

Theme Name: Melle Smets

Author: Pieter van Mourik

Version: 1

*/

/* ADDED BY MICHIEL VREDEVELDT METDT */

.wp-block-column {
  margin: 0 1%;
  padding: 1%;
}

a.wp-block-button__link {
  padding: .667em 1.333em;
  text-decoration: none !important;
}

.home-werkwijze figure {
  display:block;
  height: 200px;
  overflow: hidden;
}

.home-werkwijze {
  max-width: 1024px;
  margin: 0 auto;
}

.home-werkwijze h2 {
  margin-bottom: 1em;
}

.reusable-media p {
  min-height: 3.2em;
  display: block;
}

.similar_items {
  margin-top: 0px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.similar_item_block {
  width: 30%;
  border: 1px solid #868686;
  text-align: center;
}

.similar_item_block a {
  display: flex;
  flex-direction: column;
}

.similar_item_block figure {
  margin: 0;
  height: 145px;
  overflow: hidden;
}

.similar_item_block img {
  width: 100%;
  height: auto;
}

.similar_item_block a h2 {
  color: #111;
}

.the_advanced_excerpt div {
  display: none !important;
}

.related-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: center;
}

.yarpp-related a:link, .yarpp-related a:visited {
  font-weight: 400;
  color: #000000;
}

.similar_items p {
  margin-top: 0;
}

.similar_items p.label {
  padding: 8px 12px 8px 12px;
  text-align: center;
  width: fit-content;
  margin: -20px auto 14px;
  color: #000;
  font-weight: 400;
}


.reusable-media .wp-block-group__inner-container .wp-block-columns {
  display: flex;
  text-align: center;
}



/* END - ADDED BY MICHIEL VREDEVELDT METDT */

body {

font-family: 'Libre Franklin', sans-serif;

font-weight: 400;

padding: 0;

margin: 0;

height: 100%;

background: #fff;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

-webkit-text-stroke: 0.1px;

font-size: 16px;

line-height: 164%;

}









/* global */

p{

font-size: 16px;

line-height: 164%;

}



h1{

   font-size: 24px;

}



h2{

  font-size: 20px;

font-weight: 600;

}



button{

  cursor: pointer;

}



a:link { /* edited by Michiel */

  text-decoration: underline;

  color: #0066FF;

}



a:visited { /* edited by Michiel */

  text-decoration: underline;

  color: #8ff2a0;

}







/* work */

.work {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  gap: 40px;

      margin: 0 auto;



      width: calc(100% - 160px);

}





.work>div {

  flex-grow: 1;

min-width: 200px;

width: 20%;

max-width: calc(50% - 20px);

}







.work>div>div {

  border: 1px solid #868686;

  background: #fff;

}



.work p {

  font-size: 17px;

  line-height: 140%;

}

.thumbnail{

  height: 156px;

  background: rgb(246, 246, 246);

  width: 100%;

}



.thumbnail img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.work>div p{

  margin: 0;

  text-align: center;

  padding-left: 18px;

  padding-right: 18px;



}



.work>div p:nth-child(2) {

  padding: 8px 12px 8px 12px;

  margin-top: -20px;

    margin-bottom: 14px;

}



.label {

  padding: 8px 12px 8px 12px;

  background: #fff;

  border: 1px solid #000;

  border-radius: 20px;

}



.work>div h2 {

    margin-bottom: 6px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

      text-align: center;

      padding-left: 18px;

      padding-right: 18px;

      margin: 0;

}



.work>div p:nth-child(4) {

  margin-bottom: 14px;

  height: 22px;

}



.work>div p:nth-child(5) {

    margin-bottom: 28px;

      display: -webkit-box;

      -webkit-line-clamp: 3;

      -webkit-box-orient: vertical;

      overflow: hidden;

      height: 72px;

}



.work>div button {

  width: 100%;

  height: 32px;

  background: #000;

  color: #fff;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  border: none;

  margin-top: 8px;

}



.work>div button a {

  margin-left: -20px;

  font-size: 16px;



}



.work>div button img {

  width: 20px;

  height: 20px;

  float: left;

  margin-left: 6px;

}





/* menu */

.nav {

  position: fixed;

  z-index: 10;

  width: 100%;

  left: 50%;

   top:0px;

  transform: translateX(-50%);

  height: 96px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(246, 245, 245, .9);

  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.16);

}







.nav ul {

  margin: 0;

  padding: 0;

  width: 73vw;

    max-width: 1200px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: space-between;

  max-width: 1000px;

}



.nav ul li {

  display: block;

}





.nav a {

  display: block;

  color: #000;

  text-decoration: none;

  line-height: 13px;

  transition: 0.1s;



}



.nav a:hover {

  color: #000;

}



.current-menu-item{

    text-decoration: underline;

  text-underline-offset: 0.3em;

  text-decoration-thickness: 4px;

}



.nav li:nth-child(1) a:hover {

  color: #000;

}

.menu-item.current-menu-item:nth-child(1) a{

  text-decoration-color: #000;

}

.menu-item.current-menu-item:nth-child(1){

  text-decoration-color: #000;

}



.nav li:nth-child(2) a:hover {

  color: #000;

}

.menu-item.current-menu-item:nth-child(2) a{

  text-decoration-color: #000;

}

.menu-item.current-menu-item:nth-child(2){

  text-decoration-color: #000;

}





.nav li:nth-child(3) a:hover {

  color: #000;

}

.menu-item.current-menu-item:nth-child(3) a{

  text-decoration-color: #000;

}

.menu-item.current-menu-item:nth-child(3){

  text-decoration-color: #000;

}



.nav li:nth-child(4) a:hover {

  color: #000;

}

.menu-item.current-menu-item:nth-child(4) a{

  text-decoration-color: #000;

}

.menu-item.current-menu-item:nth-child(4){

  text-decoration-color: #000;

}



.nav li:nth-child(5) a:hover {

  color: #000;

}

.menu-item.current-menu-item:nth-child(5) a{

  text-decoration-color: #000;

}

.menu-item.current-menu-item:nth-child(5){

  text-decoration-color: #000;

}



.nav li:nth-child(6) a:hover {

  color: #000;

}

.menu-item.current-menu-item:nth-child(6) a{

  text-decoration-color: #000;

}

.menu-item.current-menu-item:nth-child(6){

  text-decoration-color: #000;

}



.wrapper_home{

    width: calc(100% - 48px);

    margin: 0 auto;

      max-width: 1440px;

}



/* Home first section */



.home_about{

  display: flex;

  flex-direction: row;

  align-items: stretch;

  align-content: space-between;

  flex-flow: no-wrap;

  gap: 30px;

overflow: hidden;

}



.home_about > div{

 width: 40%;

}



.home_about > div:nth-child(2){

  width: 60%;

  align-self: self-end;

}



.about{

 background: rgb(246, 246, 246);

  padding: 28px 48px 28px 48px;

}



.melle{

  height: 80px;

   padding-left: 48px;

}



.home_about p{

  font-size: 19px;

  line-height: 164%;

  margin: 0;

  padding-bottom: 20px;

}



.home_about h1{

  height: 80px;

padding-left: 48px;

margin:0;

text-align: left;

}



.filler_about{

height: 80px;

}





/* melle_study */

.melle_study{

  width: 70%;

  text-align: center;

  margin: 0 auto;

}

.melle_study p{

  font-size: 16px;

  line-height: 150%;

}





.wp-block-column:not(:first-child){

  margin-left: 0!important;

}



.wp-block-button{

  margin-bottom: 0!important;

}



.wp-block-button__link{

       padding: 10px 20px 10px 20px;

  border: 0!important;

background-color: #fff!important;

  border-radius: 0!important;

color: #000!important;

cursor: pointer;

display: inline-block;

font-size: inherit!important;



text-align: center;

text-decoration: none;

overflow-wrap: break-word;

box-sizing: border-box;

}



.wrapper_home.wp-block-column {

  flex-grow: unset !important;

  flex-basis: unset !important;



  }







.werkwijze {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  margin: 0 auto;

  gap: 20px;

  padding: 0 !important;

}



.werkwijze>div {

  padding:28px 16px 28px 16px;

  background: rgb(246, 246, 246);

  flex-grow: 1 !important;

  min-width: 200px;

  width: 20%;

}



.werkwijze figure {

  margin: 0;

  padding-bottom: 16px;

}



.werkwijze figure img {

  width: 100%;

  height: 220px;

      object-fit: cover;

}



.werkwijze h3 {

  margin: 0;

  text-align: center;

  padding-bottom: 28px;

}



.werkwijze p {

  margin: 0;

}



/* over */



.over {

  display: flex;

  flex-direction: row;

  flex-wrap: no-wrap;

  width: 100%;

  align-items: stretch;

  gap: 30px;

  margin: 0 auto;

}



#over h1{

  padding: 0px 0px 32px 48px;

  margin: 0;

}





.over>div {

  margin: 0;

  width: 60%;

  background: rgb(246, 246, 246);

}



.over>div:nth-child(1) {

  width: 40%;

  background: #fff;



}



.over>div:nth-child(1) p{

    padding:0px 48px 28px 48px;

    margin: 0;

}



.over figure {

  margin: 0;

height: 100%;

}



.over figure img {

  width: 100%;

  height: 100%;

object-fit: cover;



}



.over>div:nth-child(2) {

  height: 440px;

}



/* footer */

.footer{

  display: flex;

    align-items: center;

    justify-content: center;

  width: 100%;

  height: 162px;

  background: rgb(246, 246, 246);

  text-align: center;

  font-weight: 700;

}



.footer a{

font-weight: 400;

}



/* button */

.button_groot{

  margin: 0 auto;

   background-color: #fff;

  border: 2px solid #000;

  color: #000;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

  font-weight: 600;

  width: 80%;

  height: 72px;

}









/* media */



#media h1{

  text-align: center;

}



.media {

  display: flex;

  flex-direction: row;

  gap: 40px;

  flex-wrap: wrap;

  width: 60%;

  margin: 0 auto;

}



.media p:first-child {

  text-align: center;

}



.media>div {

  flex: 1 1 0;

  flex-shrink: 0;



  display: flex;

  flex-direction: row;

  gap: 20px;

}



.media>div>div {

  flex: 1 1 0;

  text-align: center;

  border-bottom: 2px solid #E0B1F2;

  width: 20%;

  min-width: 80px;

}





.media>div>div img {



  border: 2px solid #000;

  width: 100%;

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center;



  object-fit: cover;

  background-repeat: no-repeat;

  box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  margin: 0px 0px 8px 0px;

}







.media>div>div>div {

  display: flex;

  justify-content: center;

  align-items: end;

  justify-content: center;

  height: 50px;

}



.media>div:nth-child(1) > div:nth-child(1) {

    border-bottom: 2px solid #D0FCC5;

}

.media>div:nth-child(1) > div:nth-child(2) {

    border-bottom: 2px solid #E86969;

}

.media>div:nth-child(1) > div:nth-child(3) {

    border-bottom: 2px solid #8F9CF2;

}



.media>div:nth-child(2) > div:nth-child(1) {

    border-bottom: 2px solid #D9D957;

}

.media>div:nth-child(2) > div:nth-child(2) {

    border-bottom: 2px solid #D587F2;

}

.media>div:nth-child(2) > div:nth-child(3) {

    border-bottom: 2px solid #8FF2A0;

}



/* spacer */

.spacer{

  height: 120px;

}



.spacer_half{

  height: 60px;

}





/* single */

.single{

margin-top: 69px;

}



.single .attachment-post-thumbnail {

  height: 100vh;

    display: block;

    width: 100%;

    object-fit: cover;

padding-bottom: 80px;

max-width: none !important;

}



.wrapper{

  width: 70%;

  margin: 0 auto;

  max-width: 1440px;

}







.single h1{

  Padding: 10px 36px 10px 36px;

  font-weight: 600;

background: #000;

border: 1px solid #000;

border-radius: 20px;

 color: #fff;

 font-size: 28px;

 display: inline;

 position: absolute;

top: 200px;

left: 50%;

transform: translate(-50%, -50%);

text-align: center;

}



.single .wp-block-quote{

  text-align: center;

  font-weight: 600;

  padding: 0;

  padding-bottom: 20px;

}





.wp-block-image{

  margin: 0;

}



.wp-block-image img{

  max-width: 100%;

}



.wrapper wp-block-audio{

  width: 100%;

  margin: 0;

}



.wrapper audio{

  width: 100%;

  margin: 0;

padding-top: 20px;

padding-bottom: 20px;

}



table{

  width: 100%;

  width: 100%;

  border-collapse: collapse;

}



.wp-block-table{

  margin: 0;

}



td {

height:32px;

}





.similar{

 background: rgb(246, 246, 246);

  padding-bottom: 40px;

border-bottom: 2px solid #fff;

margin-top: 72px;

  }



  .browse {

  padding: 10px 20px 10px 20px;

  background: #000;

  color: #fff;

  text-align: center;

  text-decoration: none;

  border: none;

  font-size: 18px;

}



.similar_item{
      margin-top: 0px;
      width: 100%;
}

.similar_item>div{ 
  width: 30%;
}


  .similar_header{

    display: flex;

     flex-flow: row wrap;

     justify-content: space-between;

       margin-bottom: 40px;

       padding-top:40px;

   }

   .similar_header h2{

    margin: 0;

   align-self: center;

   padding-left: 0px;

padding-right: 0px;

   }



  /* podcast */



  h2 {

  font-size: 20px;

  font-weight: 600;

  margin: 0;

}



hr{

 background-color: #F7F6F6;

 height: 2px;

 border: 0;

 margin-bottom: 32px;

 margin-top: 32px;

}



.podcast_hr:last-of-type{

  height: 0;}



.wp-block-separator{

  border-top: 0px solid!important;

border-bottom: 0px solid!important;

}



.podcast {

  display: flex;

  width: 100%;

  align-items: stretch;

  justify-content: flex-start;

  flex-wrap: wrap;

  height: 240px;

}



.podcast_title{

  padding-left: 48px;

}



.podcast>div {

  height: 100%;

}



.podcast>div:nth-child(1) {

  width: 33%;

}



.podcast>div:nth-child(1) img {

  width: 100%;

  height: 100%!important;

  object-fit: cover;

   background-color: rgb(246, 246, 246);





}



.podcast>div:nth-child(2) {

  width: 67%;

  box-sizing: border-box;

  padding-left: 48px;



}



.podcast>div h2 {

padding-bottom: 6px;

margin-top: -4px;

}



.podcast>div:nth-child(2) p {

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

  margin: 0;

  height: auto;

}



.podcast button, .playlists-button button {

    background-color: #fff;

    border: 2px solid #000;

    color: #000;

    text-decoration: none;

    display: inline-block;

    padding: 10px 20px 10px 20px;

    font-size: 18px;

}


.playlists-button button {
  margin-left: 24px;
  padding: 8px 20px 8px 20px !important;
}


.podcast audio {

  margin-top: auto;

    align-self: flex-end;

}





.n2-ss-slider .n2-ss-slider-controls-absolute-center-bottom{

    flex-flow: row!important;

justify-content: center;

gap: 260px;

top:260px;

  }



  .podcast_text{

    width: 100%;

    display:flex;



    gap:20px;

  }

  .podcast_text p{

    margin: 0;

    padding: 14px 24px 14px 24px;

  }



  .podcast_text > div{

    background: #F6F5F5;



    flex-basis:65%;

  }

  .podcast_text > div:nth-child(2) {
    flex-basis: 35%;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 1em;
}



  .select_player{

    display: flex;

    gap: 20px;

      padding: 0px 24px 14px 24px;

  }



  .select_player select{

  background-color: #000;

  border:none;

  display: block;

  font: inherit;

      line-height: inherit;

  line-height: 1.5em;

  padding: 8px 12px 8px 12px;

  width: 100%;

  color:#fff;



  -webkit-appearance: none;

  -moz-appearance: none;



  background-image: url("http://wordpress.mellesmets.nl/wp-content/uploads/2021/12/select_dropdown_player.png");

  background-repeat: no-repeat;

  background-position-x: 93%;

  background-position-y: center;

  }



  .select_player button{

    background: #000;

    border:none;

    color: #fff;

    font-family: inherit;

      padding: 8px 12px 8px 12px;

background-image: url("http://wordpress.mellesmets.nl/wp-content/uploads/2021/12/podcast_button.png");

width: 48px;

background-repeat: no-repeat;

background-size: 67%;

background-position: 60% 53%;

  }





.the_advanced_excerpt{

overflow: hidden;

padding-top: 12px;

height: 62px;

padding-bottom: 12px;

}



.the_advanced_excerpt *{

   display: none!important;

}



.the_advanced_excerpt iframe:first-of-type{

  display: unset !important;

}





.wrapper_wijd {

  margin: 0 auto;

  width: calc(100% - 160px);

    max-width: 1440px;

}







.pub {

  display: flex;

  flex-direction: row;

  flex-wrap: no-wrap;

  align-items: stretch;

  gap: 40px;

}



.pub_h1{

  padding: 0px 0px 48px 0px;

margin: 0;

}



.pub:nth-child(4n) {

  flex-direction: row-reverse;

}



.pub>div {

  margin: 0;



}



.pub>div:nth-child(1) {

  flex-basis: 40% !important;

}





.pub>div:nth-child(2) {

  flex-basis: 100% !important;

}





.pub figure {

  margin: 0;



}



.pub figure img {

  width: 100%;

  height: 100%;



  object-fit: contain;

}









.pub>div p {

  margin: 0px;

}



.pub>div p:nth-child(1) {

  /* title */

  font-size: 22px;

  font-weight: 600;

  padding-bottom: 4px;

}



.pub>div p:nth-child(2) {

  /* author */

  padding-bottom: 4px;

}



.pub>div p:nth-child(3) {

  /* date */

  font-weight: 600;

  padding-bottom: 24px;

}



.pub>div p:nth-child(4) {

  /* description */

  padding-bottom: 48px;



}



.pub_buttons{

  display: flex;

  flex-wrap: wrap;

  width: 100%;

  gap: 40px;

}







.wp-block-button{

  background-color: #fff;

  border: 2px solid #000;

  color: #000;

  text-decoration: none;

  display: inline-block;

  font-size: 18px;

  margin-right: 20px;

  margin-top: 16px;

}





.slider_test{

  background-color: rgb(246, 246, 246);;

  height: 100px;

  width: 100%;

}





.ms-info{

text-align: center;

}



.ms-info a{

  background-color: #fff;

  border: 2px solid #000;

  color: #000;

  text-decoration: none;

  display: inline-block;

  padding: 10px 20px 10px 20px;

  font-size: 18px;

}





.filter{

    display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  gap: 40px;

  margin-top: 32px;

  align-items: center;

justify-content: center;

}

.filter div{

   flex-grow: 1;

min-width: calc(25% + 10px);

 max-width: 240px

}



.filter select {

  background-color: #fff;

  border: 2px solid #000;

  display: block;

  font: inherit;

  line-height: 1.5em;

  padding: 12px 16px 12px 12px;

  width: 100%;



  -webkit-appearance: none;

  -moz-appearance: none;



  background-image: url("http://wordpress.mellesmets.nl/wp-content/uploads/2021/12/select_dropdown.png");

  background-repeat: no-repeat;

  background-position-x: 95%;

background-position-y: 56%;

}





.filter label{

  display: block;

     padding: 0px 0px 8px 0px;

     font-weight: 700;

}

/* --------------------------------------------------------------------------------------------------------------- */
/* MOBILE 479PX AND SMALLER
/* --------------------------------------------------------------------------------------------------------------- */

@media (max-width: 479px) {
  .reusable-media .wp-block-group__inner-container .wp-block-columns .wp-block-column {
    flex-basis: 40% !important;
  }

  .reusable-media h2 {
    margin-bottom: 10px;
  }

  .reusable-media p {
    margin: 0;
}

.similar_items {
  flex-direction: column;
}

.similar_item_block {
  width: 99%;
  margin-bottom: 1em;
}


}